gpt4 book ai didi

javascript - 使用 JavaScript 将 DropDown 值参数化为 URL?

转载 作者:行者123 更新时间:2023-11-30 19:06:17 26 4
gpt4 key购买 nike

我有下面的代码。它有 3 个下拉选项值。目前,在更改下拉选择时会引发警报。

现在,我想实现以下目标:将我的下拉值参数化为 URL,这样当我在浏览器中输入以下 URL 时:file://test.ds.waq.cb.uk/anywhere/UserData/PSStore02/u1718987/Desktop/new.html?mySelect=BMW 结尾,然后浏览器打开下拉菜单,其中填充了值 BMW .

或者如果我输入 file://test.ds.waq.cb.uk/anywhere/UserData/PSStore02/u1718987/Desktop/new.html?mySelect=Audi,浏览器会打开填充了 Audi 的下拉列表。

 <!DOCTYPE html>
<html>
<body>

<p>Select a new car from the list.</p>

<select id="mySelect" onchange="myFunction()">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Volvo">Volvo
</select>


<p id="demo"></p>

需要修改以下脚本,将下拉选择参数化为URL,请指教。

<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
alert (document.getElementById.innerHTML = "You selected: " + x);
}
</script>

</body>
</html>

最佳答案

您可以使用表达式和一些条件来轻松获取 url 的参数来选择选项。更改 url 中的 mySelect 值以检查它。JavaScript:

    function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
$(document).ready(function(){
var data = getUrlVars()["mySelect"];
if(data == "Audi"){
$('select').prop('selectedIndex', 0);
}
else if(data == "BMW"){
$('select').prop('selectedIndex', 1);
}
else if(data == "Volvo"){
$('select').prop('selectedIndex', 2);
}
});

HTML:

<select>
<option class="Audi">Audi</option>
<option class="BMW">BMW</option>
<option class="Volvo">Volvo</option>
</select>

关于javascript - 使用 JavaScript 将 DropDown 值参数化为 URL?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58954704/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com