jquery 怎樣獲取select多選下拉框所有選項的值

思路：jquery 獲取select多選下拉框所有選項的值，可以通過選取多選的數(shù)組進(jìn)行循環(huán)判斷即可。

專注于為中小企業(yè)提供做網(wǎng)站、成都做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)衢州免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

方法如下：

function?f(){

var?se?=?document.getElementById("t");

var?s?=?[];

for(i=0;ise.length;i++){

if(se.options[i].selected){

s.push(se[i].value);

}

}

alert(s);

}

select?id="t"?multiple="true"

option?value="a"option-A/option??

option?value="b"option-B/option

option?value="c"option-C/option?

option?value="d"option-D/option

/select

input?type="button"?value="確定"?onclick="f()"?/

如圖所示：

使用jquery實(shí)現(xiàn)下拉多選需要哪些js和css

jquery 獲取select多選下拉框所有選項的值可以如下實(shí)現(xiàn)

var?all?=?"";

$("select?option").each(function()?{

all?+=?$(this).attr("value")+"?";

});

而值獲取被選中的值可用如下代碼實(shí)現(xiàn)

$("select").val();

下面給出實(shí)例代碼：

創(chuàng)建Html元素：一個多選列表和一個按鈕

select?id="multi-sel"?multiple="multiple"

option?value="1"蘿卜，我的value是1/option

option?value="2"青菜，我的value是2/option

option?value="3"小蔥，我的value是3/option

option?value="4"豆腐，我的value是4/option

/select

input?type="button"?value="點(diǎn)擊顯示選擇的項目"

簡單設(shè)置一下css樣式

select{width:200px;height:150px;padding:10px;border:4px?dashed?#ccc;}

select?option{margin:5px;}

input[type='button']{width:200px;height:35px;margin:10px;border:2px?dashed?#ebbcbe;}

編寫jquery代碼：實(shí)現(xiàn)獲取所有值和獲取選中值

$(function(){

$("input:button").click(function()?{

var?all?=?"";

$("select?option").each(function()?{

all?+=?$(this).attr("value")+"?";

});

var?sel?=?$("select").val();

alert("多選列表所有的value值:"+all+"，其中被選中的是:"+sel+"。");

});

})

觀察效果

求jquery版的多選樹形下拉框的插件(Multiple ComboTree)？

第一步，創(chuàng)建靜態(tài)頁面select.html，引入select2相關(guān)的css和js文件，并引入jQuery核心js，如下圖所示：

第二步，在body標(biāo)簽內(nèi)插入select元素，設(shè)置屬性multiple和class，寬度為300px，如下圖所示：

第三步，初始化select2插件，需要調(diào)用select2()方法，如下圖所示：

第四步，為了演示獲取下拉框值，這里利用button按鈕點(diǎn)擊事件，在select下方插入一個button按鈕，如下圖所示：

5

第五步，編寫按鈕點(diǎn)擊事件，事件里獲取多選下拉框值和文本內(nèi)容，如下圖所示：

6

第六步，在瀏覽器中進(jìn)行預(yù)覽，點(diǎn)擊“取值”按鈕，會看到打印下拉框選擇的值和文字，如下圖所示：

Jquery編程開發(fā)中可多選的下拉框如何實(shí)現(xiàn)

在select標(biāo)簽中添加multiple="multiple"屬性，即可多選，如下

select multiple="multiple"

multiple 屬性可設(shè)置或返回是否可有多個選項被選中。