使用查询字符串参数动态设置选择下拉列表的值

Question

首先，我是 Javascript 新手。

我有一个带有选择元素的表单，其中包含各种选项，但我无权更改表单。选项没有 id，只有下面代码中显示的值。

    <form>
    <select class="country" name="country" id="countryid">
        <option value="usa" selected="selected">USA</option>
        <option value="canada">Canada</option>
        <option value="japan">Japan</option>
        <option value="china">China</option>
        </select>
    </form>

我的目标是根据 url 参数自动填充上述表单中的字段。 例如，www.example.com?country=china 应在表单字段中填充中国。以下是javascript代码：

<script>
var param1var = getQueryVariable("country");

function displayresult(){
    //document.getElementById(param1var).selected=true; //if there was id given in     the form field
        //cannot use document.getElementByValue(param1var).selected=true;
    //document.querySelectorAll('input[value=' + param1var + ']').selected=true; does not work
}

function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  } 
}
</script>

1. 我无法使用 document.getElementById(param1var)，因为没有 id。
2. Javascript 不支持 document.getElementByValue(param1var)。
3. document.querySelectorAll 不起作用。

有没有一种方法可以使用选项值引用元素？

谢谢！

Answer 1

您可以通过设置选择元素的值来做到这一点。另请注意，值区分大小写，并确保函数 displayresult 在 onload 上或在元素出现在 html 之后运行。

document.getElementById("countryid").value=param1var; 

Demo