使用 JavaScript 将下拉值参数化为 URL？

Question

我有下面的代码。 它有 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>

Answer 1

您可以使用表达式和一些条件轻松获取 url 的参数 select 选项。 更改 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>

Answer 2

一旦 select 盒子加载，您可以阅读 url 参数，请参见下面的代码

HTML：

    <!DOCTYPE html>
        <html>
        <body>

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

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


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


<script>
 function setMySelect() {
    var urlParams = new URLSearchParams(window.location.search);
    var mySelect = urlParams.get('mySelect');
    if(mySelect)
    document.getElementById("mySelect").value = mySelect;
}
function myFunction() {
  var x = document.getElementById("mySelect").value;
  alert (document.getElementById.innerHTML = "You selected: " + x);
}
</script>

</body>
</html>

Answer 3

使用此答案提取搜索查询。 然后只需使用适当的值设置负载值。

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

更新使两者都在同一个脚本中。

<script>
function setValue(value) {
  document.getElementById("mySelect").value = value;
  alert (document.getElementById.innerHTML = "You selected: " + x);
}
let urlParams = new URLSearchParams(window.location.search);
setValue(urlParams.get('mySelect');
</script>

Answer 4

您可以尝试以下方法。

var url = new URL(window.location);
var params = new URLSearchParams(url.search.slice(1));
for (let [key, value] of params.entries()) {
    if(params.has(key) && key == "mySelect") {
        document.getElementById(key).value = value;
    }
}
document.getElementById("mySelect").addEventListener("change", (e) => {
    params.set("mySelect",e.target.value);
    url.search = params.toString();
    let new_url = url.toString();
    window.location.assign(new_url);
})

Answer 5

我需要以下 window.onload 因为这个 function 没有被加载。

<!DOCTYPE html>
            <html>
            <body>

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

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


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


    <script>
     <!-- function setMySelect() { -->

     window.onload = function() {
        var urlParams = new URLSearchParams(window.location.search);
        var mySelect = urlParams.get('mySelect');
        if(mySelect)
        document.getElementById("mySelect").value = mySelect;
    }
    function myFunction() {
      var x = document.getElementById("mySelect").value;
      alert (document.getElementById.innerHTML = "You selected: " + x);
    }
    </script>

    </body>
    </html>

使用 JavaScript 将下拉值参数化为 URL？

问题描述

5 个解决方案

解决方案1
1 2019-11-20 12:53:41

解决方案2
0 2019-11-20 12:58:14

解决方案3
0 2019-11-20 12:59:40

解决方案4
0 2019-11-20 13:50:14

解决方案5
0 2019-11-20 14:02:33

使用 JavaScript 将下拉值参数化为 URL？

问题描述

5 个解决方案

解决方案1 1 2019-11-20 12:53:41

解决方案2 0 2019-11-20 12:58:14

解决方案3 0 2019-11-20 12:59:40

解决方案4 0 2019-11-20 13:50:14

解决方案5 0 2019-11-20 14:02:33

解决方案1
1 2019-11-20 12:53:41

解决方案2
0 2019-11-20 12:58:14

解决方案3
0 2019-11-20 12:59:40

解决方案4
0 2019-11-20 13:50:14

解决方案5
0 2019-11-20 14:02:33