如何通过 jquery 或 javascript 将多个 select 下拉值插入到 var 中？

Question

我想通过 jquery 或 javascript 将多个 select 下拉值插入到变量中。例如：

<select class="form-control ltr input-md input-group-addon" id="tld" name="tld" multiple="multiple">
    <option value="com" selected="">.com</option>
    <option value="ir">.ir</option>
    <option value="net">.net</option>
    <option value="org">.org</option>
    <option value="co">.co</option>
    <option value="xyz">.xyz</option>
    <option value="biz">.biz</option>
    <option value="info">.info</option>
    <option value="asia">.asia</option>
    <option value="club">.club</option>
    <option value="us">.us</option>
    <option value="mobi">.mobi</option>
    <option value="name">.name</option>
</select>

<script>    
//var tlds = ['info', 'com', 'net', 'org', 'co', 'biz'];    
var tlds = [multi select value goes here like above comment!];

tlds.forEach(function(tld) {
    //some work
});
</script>

有什么帮助吗？谢谢

Answer 1

jQuery val() 函数 returns 在多选下拉菜单上执行时的数组。

  
var tlds = $("#tld").val();
console.log(tlds);

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

<select class="form-control ltr input-md input-group-addon" id="tld" name="tld" multiple="multiple">
    <option value="com" selected="">.com</option>
    <option value="ir" selected="">.ir</option>
    <option value="net" selected="">.net</option>
    <option value="org">.org</option>
    <option value="co">.co</option>
    <option value="xyz">.xyz</option>
    <option value="biz">.biz</option>
    <option value="info">.info</option>
    <option value="asia">.asia</option>
    <option value="club">.club</option>
    <option value="us">.us</option>
    <option value="mobi">.mobi</option>
    <option value="name">.name</option>
</select>

Answer 2

尝试使用 map().get() 方法从元素创建数组。每次更改选择时，创建的数组都取决于所选值。

$('select').change(function(){
var res = $(this).children('option:selected').map(function(){
 return $(this).val()
}).get()
console.log(res)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control ltr input-md input-group-addon" id="tld" name="tld" multiple="multiple">
    <option value="com" selected="">.com</option>
    <option value="ir">.ir</option>
    <option value="net">.net</option>
    <option value="org">.org</option>
    <option value="co">.co</option>
    <option value="xyz">.xyz</option>
    <option value="biz">.biz</option>
    <option value="info">.info</option>
    <option value="asia">.asia</option>
    <option value="club">.club</option>
    <option value="us">.us</option>
    <option value="mobi">.mobi</option>
    <option value="name">.name</option>
</select>

Answer 3

迭代选项并将值推送到数组中。

var tlds = [];
$("#tld > option:selected").each(function(){
   tlds.push(this.value);
});
console.log(tlds);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control ltr input-md input-group-addon" id="tld" name="tld" multiple="multiple">
    <option value="com" selected="">.com</option>
    <option value="ir" selected="">.ir</option>
    <option value="net" selected="">.net</option>
    <option value="org">.org</option>
    <option value="co">.co</option>
    <option value="xyz">.xyz</option>
    <option value="biz">.biz</option>
    <option value="info">.info</option>
    <option value="asia">.asia</option>
    <option value="club">.club</option>
    <option value="us">.us</option>
    <option value="mobi">.mobi</option>
    <option value="name">.name</option>
</select>

Answer 4

您可以将此用于 javascript 从 elementId 中获取值：

var e = document.getElementById("tld");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;

然后进行循环，遍历所有选项并将其全部添加到数组中。

Answer 5

每次选择或取消选择选项时调用 onChange 函数，并将所选值推送到 tlds 数组。

//var tlds = ['info', 'com', 'net', 'org', 'co', 'biz'];    
var tlds = [];

function selectTld() {
  tlds = [];
  var vals = $('#tld').val();
  tlds.push(vals);
  $("#selectedValues").html(tlds);
}

tlds.forEach(function(tld) {
  //some work
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control ltr input-md input-group-addon" id="tld" name="tld" multiple="multiple" onChange="selectTld()">
    <option value="com" selected="">.com</option>
    <option value="ir">.ir</option>
    <option value="net">.net</option>
    <option value="org">.org</option>
    <option value="co">.co</option>
    <option value="xyz">.xyz</option>
    <option value="biz">.biz</option>
    <option value="info">.info</option>
    <option value="asia">.asia</option>
    <option value="club">.club</option>
    <option value="us">.us</option>
    <option value="mobi">.mobi</option>
    <option value="name">.name</option>
</select>

<div id="selectedValues"></div>

Answer 6

希望对您有所帮助：

var tlds = (function(select) {
  var res = [];
  
  select.addEventListener('change', function(event) {
    var values = Array
    .prototype
    .map
    .call(event.target.selectedOptions, function(a) {
      return a.value;
    })
    ;
    
    var old = res.slice();
    res.length = 0;
    res.push.apply(res, values);
    res.onValuesChange && res.onValuesChange(event, old, res);
  });
  
  return res;
})(document.getElementById('tld'));

tlds.onValuesChange = function(event, oldValues, newValues) {
  console.log({oldValues, newValues});
}

<select id="tld" multiple>
    <option value="com" selected="">.com</option>
    <option value="ir">.ir</option>
    <option value="net">.net</option>
    <option value="org">.org</option>
    <option value="co">.co</option>
    <option value="xyz">.xyz</option>
    <option value="biz">.biz</option>
    <option value="info">.info</option>
    <option value="asia">.asia</option>
    <option value="club">.club</option>
    <option value="us">.us</option>
    <option value="mobi">.mobi</option>
    <option value="name">.name</option>
</select>

如何通过 jquery 或 javascript 将多个 select 下拉值插入到 var 中？

How to insert multi select dropdown value into a var by jquery or javascript?

javascript

arrays

jquery

html-select