jquery實(shí)現(xiàn)下拉框多選方法介紹
更新時(shí)間：2017年01月03日 09:14:09 作者：冷戰(zhàn)
本文是利用EasyUI實(shí)現(xiàn)下拉框多選功能，在ComboxTree其原有的基礎(chǔ)上對(duì)樣式進(jìn)行了改進(jìn)，樣式表已上傳demo，下面跟著小編一起來(lái)看下吧
一、說(shuō)明
本文是利用EasyUI實(shí)現(xiàn)下拉框多選功能，在ComboxTree其原有的基礎(chǔ)上對(duì)樣式進(jìn)行了改進(jìn)，樣式表已上傳demo，代碼如下
二、代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>利用EasyUI實(shí)現(xiàn)多選下拉框</title>
<link rel="stylesheet" type="text/css" href="EasyUI/easyui.css" />
<script type="text/javascript" src="EasyUI/jquery.min.js"></script>
<script type="text/javascript" src="EasyUI/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function () {
$('#ddlLine').combotree({
valueField: "id", //Value字段
textField: "text", //Text字段
multiple: true,
data: [{ "id": 1, "text": "All", "children": [{ "id": 13, "text": "C1" }, { "id": 14, "text": "C2" }, { "id": 15, "text": "C3"}]}],
// url: "tree_data2.json", //數(shù)據(jù)源
onCheck: function (node, checked) {
//讓全選不顯示
$("#ddlLine").combotree("setText", $("#ddlLine").combobox("getText").toString().replace("全選,", ""));
},
onClick: function (node, checked) {
//讓全選不顯示
$("#ddlLine").combotree("setText", $("#ddlLine").combobox("getText").toString().replace("全選,", ""));
}
});
})
</script>
</head>
<body>
多選：<select id="ddlLine" class="easyui-combotree" style="width: 205px; height: 24px;">
</select>
</body>
</html>
三、效果
四、下載
案例下載：http://wd.jb51.net:81//201701/yuanma/ComboBox_jb51.rar
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
jQuery Trim去除字符串首尾空字符的實(shí)現(xiàn)方法說(shuō)明
本篇文章主要是對(duì)jQuery Trim去除字符串首尾空字符的實(shí)現(xiàn)方法進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
Jquery 實(shí)現(xiàn)table樣式的設(shè)定
這篇文章主要介紹了Jquery 實(shí)現(xiàn)table樣式的設(shè)定方法的相關(guān)資料,需要的朋友可以參考下2015-01-01
jquery在項(xiàng)目中做復(fù)選框時(shí)遇到的一些問(wèn)題筆記
在實(shí)踐中還是遇到了很多的問(wèn)題，注意在input的checkbox中，用普通的attr屬性來(lái)判斷是不可以的，因?yàn)閏hecked的值是checked，因此做個(gè)筆記2013-11-11
使用jQuery操作HTML的table表格的實(shí)例解析
這篇文章主要介紹了使用jQuery操作HTML的table表格的實(shí)例解析,包括用jQuery獲取表格總行數(shù)的小技巧,需要的朋友可以參考下2016-03-03
本文主要總結(jié)了jQuery中的一些小技巧。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
3種不同的ContextMenu右鍵菜單實(shí)現(xiàn)代碼
本文給大家分享3種不同的ContextMenu右鍵菜單實(shí)現(xiàn)代碼的相關(guān)資料,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
jQuery在html有效在jsp無(wú)效的原因及解決方法
最近用jQuery來(lái)寫(xiě)下拉框的選項(xiàng)值的左右移動(dòng)，放到j(luò)sp里面就不能用了，經(jīng)過(guò)測(cè)試終于找到了解決方法在此與大家分享下2013-08-08
jquery實(shí)現(xiàn)的回旋滾動(dòng)效果完整實(shí)例【附demo源碼下載】
這篇文章主要介紹了jquery實(shí)現(xiàn)的回旋滾動(dòng)效果,可實(shí)現(xiàn)點(diǎn)擊后側(cè)圖片呈現(xiàn)立體翻轉(zhuǎn)切換的功能,涉及jQuery插件roundabout.js的使用,并附帶了完整實(shí)例demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09
jQuery實(shí)現(xiàn)仿QQ空間裝扮預(yù)覽圖片的鼠標(biāo)提示效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿QQ空間裝扮預(yù)覽圖片的鼠標(biāo)提示效果代碼,基于jQuery鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式的動(dòng)態(tài)變換實(shí)現(xiàn)該功能,需要的朋友可以參考下2015-10-10
下面小編就為大家?guī)?lái)一篇使用jQuery和ajax代替iframe的方法(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04