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

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

從策劃到設(shè)計(jì)制作，每一步都追求做到細(xì)膩，制作可持續(xù)發(fā)展的企業(yè)網(wǎng)站。為客戶提供網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)頁(yè)設(shè)計(jì)、域名與空間、網(wǎng)站空間、網(wǎng)絡(luò)營(yíng)銷、VI設(shè)計(jì)、 網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案,以客戶的口碑塑造優(yōu)易品牌,攜手廣大客戶,共同發(fā)展進(jìn)步。

select multiple="multiple"

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

jQuery 多選下拉框插件

插件沒有，不過可以說說原理；設(shè)置一個(gè)input type=“text" readonly=truebr/select multiple style="display:none"/select,當(dāng)點(diǎn)擊input的時(shí)候，查詢數(shù)據(jù)庫(kù)，將值賦值給select并讓select顯示出來(lái)，選擇option的時(shí)候給input賦值就搞定了。

jquery 怎樣獲取select多選下拉框所有選項(xiàng)的值

思路：jquery 獲取select多選下拉框所有選項(xiàng)的值，可以通過選取多選的數(shù)組進(jìn)行循環(huá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版的多選樹形下拉框的插件(Multiple ComboTree)？

第一步，創(chuàng)建靜態(tài)頁(yè)面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下方插入一個(gè)button按鈕，如下圖所示：

5

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

6

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

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

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

var?all?=?"";

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

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

});

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

$("select").val();

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

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

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)擊顯示選擇的項(xiàng)目"

簡(jiǎ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+"。");

});

})

觀察效果

怎么設(shè)置Jquery 多選下拉列表插件jquery multiselect 的高度

這個(gè)插件沒有定義控件的高度的配置，控件也沒有設(shè)置高度，依據(jù)內(nèi)容的高度來(lái)確定控件整體高度，你可以給樣式添加高度即可。不過還是修改源代碼來(lái)實(shí)現(xiàn)高度控制好點(diǎn)，可以隨便配置，而不用統(tǒng)一

2者結(jié)合也可以

css覆蓋部分，你也可以修改jquery.multiselect.css這個(gè)css文件增加style里面的樣式

link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" /

style

.ui-multiselect{line-height:30px;height:30px}

/style

或者修改jquery.multiselect.js文件，增加一個(gè)cHeight配置，用來(lái)控制控件的高度，找到下面的這句，修改成這樣

var button = (this.button = $('button type="button"span class="ui-icon ui-icon-triangle-1-s"/span/button'))

===改成這樣，判斷配置了cHeight增加增加style控制高度

var button = (this.button = $('button type="button"'+(o.cHeight?' style="height:'+o.cHeight+'px"':'')+'span class="ui-icon ui-icon-triangle-1-s"/span/button'))

DEMO

$("select").multiselect({cHeight:40});

網(wǎng)頁(yè)名稱：jquery多選下拉,下拉菜單jquery
鏈接地址：http://chinadenli.net/article42/dseepec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、商城網(wǎng)站、關(guān)鍵詞優(yōu)化、云服務(wù)器、Google、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)