从 URL 设置多个 Select

Question

我正在使用以下代码从 URL 中获取信息以预填表格，但是，如果提供了多个选项，我试图让它与多个 select 一起使用.

$(function() {
    //grab the entire query string
    var query = document.location.search.replace('?', '');
    //extract each field/value pair
    query = query.split('&');
    //run through each pair
    for (var i = 0; i < query.length; i++) {
        //split up the field/value pair into an array
        var field = query[i].split("=");
        //target the field and assign its value
        $("input[name='" + field[0] + "'], select[name='" + field[0] + "']").val(field[1]));
    }
});

多个Select例子

<select name='strings' id="strings" multiple style="width:100px;">
    <option value="Test">Test</option>
    <option value="Prof">Prof</option>
    <option value="Live">Live</option>
    <option value="Off">Off</option>
    <option value="On">On</option>
</select>

我希望能够做 http://www.example.com?strings=Test,Prof 或类似的事情。我是 JQuery 的新手，对此不太确定。

Answer 1

您可以传递一个数组作为值来设置 multiple select 个值。

一个简单的方法，寻找 , 的存在来指示多个值（如果 , 是其他字段值中的有效字符，那么做一些更聪明的事情）：

var query = 'strings=Test,Prof';
//extract each field/value pair
query = query.split('&');

//run through each pair
for (var i = 0; i < query.length; i++) {
  //split up the field/value pair into an array
  var field = query[i].split("=");
  //target the field and assign its value

  var parts = field[1].split(',');

  if (parts.length > 1)
    $("select[name='" + field[0] + "']").val(parts);
  else
    $("input[name='" + field[0] + "'], select[name='" + field[0] + "']").val(field[1]);
}

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

<select name='strings' id="strings" multiple style="width: 100px">
    <option value="Test">Test</option>
    <option value="Prof">Prof</option>
    <option value="Live">Live</option>
    <option value="Off">Off</option>
    <option value="On">On</option>
</select>

Answer 2

您可以像这样使用 javascript fiddle：http://jsfiddle.net/yqh5u762/

document.getElementById("strings")[2].selected = true;
document.getElementById("strings")[1].selected = true;

您不能让方框更改它的值，因为只允许一个，但您可以让各个选项显示已选中。这确实需要您使用与选项数组相关的索引号。

从 URL 设置多个 Select

Setting Multiple Select from URL

javascript

jquery

multiple-select