如何通過jquery或javascript將多選select下拉值插入var？

我想通過jquery或javascript插入多選擇下拉值到var。例如：如何通過jquery或javascript將多選select下拉值插入var？

<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>

任何幫助嗎？謝謝

來源

2017-05-31 Mohammad J

jQueryval()函數在多選下拉列表中執行時返回一個數組。


 
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>

來源

2017-05-31 08:31:15

與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>

來源

2017-05-31 08:32:05 prasanth

遍歷選項和陣列中的推值。

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>

來源

2017-05-31 08:32:24

您可以用這個JavaScript從elementId獲得的價值：

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

，然後用循環入手，通過所有選項循環，這一切加入到一個數組。

來源

2017-05-31 08:34:55

每次選擇或取消選擇某個選項時都會調用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>

來源

2017-05-31 08:35:01 Sajal

願這可以幫助您：

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>

來源

2017-05-31 08:39:27 Hitmands

如何通過jquery或javascript將多選select下拉值插入var？

回答

相關問題