如何在页面加载时获取 URL 参数并设置 select 选项的值？

Question

我是 Javascript 的新手，我在网上找不到一个简单的例子。

我有一个简单的 HTML 页面，上面有一个 select 小部件：

<select name="myProduct">
    <option value="aaa">This is AAA</option>
    <option value="bbb">This is BBB</option>
    <option value="ccc">This is CCC</option>
</select>

像这样将参数传递给 URL 的简单方法是什么...

/mypage.html?selectedProduct=CCC

...并在页面加载时在小部件中选择了值？

Answer 1

Set up a change event handler on the select and append the querystring (that has the value of the select concatenated on to it) to the current URL.

 var urlParams = new URLSearchParams(window.location.search); let queryString = urlParams.get('selectedProduct'); // Find the option in the select that has the same value as // the query string value and make it be selected document.getElementById("myProduct").querySelector("option[value='" + queryString + "']").selected = true;

 <select id="myProduct"> <option value="aaa">This is AAA</option> <option value="bbb">This is BBB</option> <option value="ccc">This is CCC</option> </select>

Answer 2

我让它像这样工作......

<html>

<head>
/* .... */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<script type="text/javascript">
    $(function() {
        var selectedProduct = GetURLParameter("selectedProduct");
        if (selectedProduct) {
            $("#myProduct").val(selectedProduct); 
        }
    });
    
    function GetURLParameter(sParam)
    {
        var sPageURL = window.location.search.substring(1);
        var sURLVariables = sPageURL.split('&');
        for (var i = 0; i < sURLVariables.length; i++)
        {
            var sParameterName = sURLVariables[i].split('=');
            if (sParameterName[0] == sParam)
            {
                return sParameterName[1];
            }
        }
    }
</script>

<body>

<select id="myProduct"> <!-- NOTE that's 'id', not 'name' there -->
    <option value="aaa">This is AAA</option>
    <option value="bbb">This is BBB</option>
    <option value="ccc">This is CCC</option>
</select>

</body

</html>

如何在页面加载时获取 URL 参数并设置 select 选项的值？

问题描述

2 个解决方案

解决方案1
2 已采纳 2020-07-16 18:45:04

解决方案2
0 2020-07-16 19:13:18

如何在页面加载时获取 URL 参数并设置 select 选项的值？

问题描述

2 个解决方案

解决方案1 2 已采纳 2020-07-16 18:45:04

解决方案2 0 2020-07-16 19:13:18

解决方案1
2 已采纳 2020-07-16 18:45:04

解决方案2
0 2020-07-16 19:13:18