建站
咨詢
售后
建站咨詢
新聞中心
Jquery編程開發(fā)中可多選的下拉框如何實現(xiàn)
在select標(biāo)簽中添加multiple="multiple"屬性，即可多選，如下
從策劃到設(shè)計制作，每一步都追求做到細(xì)膩，制作可持續(xù)發(fā)展的企業(yè)網(wǎng)站。為客戶提供網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)頁設(shè)計、域名與空間、網(wǎng)站空間、網(wǎng)絡(luò)營銷、VI設(shè)計、 網(wǎng)站改版、漏洞修補等服務(wù)。為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案,以客戶的口碑塑造優(yōu)易品牌,攜手廣大客戶,共同發(fā)展進步。
select multiple="multiple"
multiple 屬性可設(shè)置或返回是否可有多個選項被選中。
jQuery 多選下拉框插件
插件沒有，不過可以說說原理；設(shè)置一個input type=“text" readonly=truebr/select multiple style="display:none"/select,當(dāng)點擊input的時候，查詢數(shù)據(jù)庫，將值賦值給select并讓select顯示出來，選擇option的時候給input賦值就搞定了。
jquery 怎樣獲取select多選下拉框所有選項的值
思路：jquery 獲取select多選下拉框所有選項的值，可以通過選取多選的數(shù)組進行循環(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)頁面select.html，引入select2相關(guān)的css和js文件，并引入jQuery核心js，如下圖所示：
第二步，在body標(biāo)簽內(nèi)插入select元素，設(shè)置屬性multiple和class，寬度為300px，如下圖所示：
第三步，初始化select2插件，需要調(diào)用select2()方法，如下圖所示：
第四步，為了演示獲取下拉框值，這里利用button按鈕點擊事件，在select下方插入一個button按鈕，如下圖所示：
5
第五步，編寫按鈕點擊事件，事件里獲取多選下拉框值和文本內(nèi)容，如下圖所示：
6
第六步，在瀏覽器中進行預(yù)覽，點擊“取值”按鈕，會看到打印下拉框選擇的值和文字，如下圖所示：
使用jquery實現(xiàn)下拉多選需要哪些js和css
jquery 獲取select多選下拉框所有選項的值可以如下實現(xiàn)
var?all?=?"";
$("select?option").each(function()?{
all?+=?$(this).attr("value")+"?";
});
而值獲取被選中的值可用如下代碼實現(xiàn)
$("select").val();
下面給出實例代碼：
創(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="點擊顯示選擇的項目"
簡單設(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代碼：實現(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 的高度
這個插件沒有定義控件的高度的配置，控件也沒有設(shè)置高度，依據(jù)內(nèi)容的高度來確定控件整體高度，你可以給樣式添加高度即可。不過還是修改源代碼來實現(xiàn)高度控制好點，可以隨便配置，而不用統(tǒng)一
2者結(jié)合也可以
css覆蓋部分，你也可以修改jquery.multiselect.css這個css文件增加style里面的樣式
link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" /
style
.ui-multiselect{line-height:30px;height:30px}
/style
或者修改jquery.multiselect.js文件，增加一個cHeight配置，用來控制控件的高度，找到下面的這句，修改成這樣
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});
標(biāo)題名稱：jquery多選下拉,下拉菜單jquery
分享鏈接：http://www.dlmjj.cn/article/dseepec.html
