jquery實(shí)現(xiàn)下拉框多選方法介紹
一、說明
本文是利用EasyUI實(shí)現(xiàn)下拉框多選功能,在ComboxTree其原有的基礎(chǔ)上對樣式進(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
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關(guān)文章
jQuery實(shí)現(xiàn) RadioButton做必選校驗(yàn)功能
這篇文章主要介紹了jQuery實(shí)現(xiàn) RadioButton做必選校驗(yàn)功能的相關(guān)資料,需要的朋友可以參考下2017-06-06
8款非常棒的響應(yīng)式j(luò)Query 幻燈片插件推薦
這篇文章收集了8款優(yōu)秀的響應(yīng)式 jQuery 幻燈片插件,它們能夠非常容易的集成到 Web 項(xiàng)目中。響應(yīng)式(Responsive)設(shè)計(jì)的目標(biāo)是要讓產(chǎn)品界面能夠響應(yīng)用戶的行為,根據(jù)不同終端設(shè)備自動調(diào)整尺寸,帶給用戶良好的使用體驗(yàn)2012-02-02
通過Jquery.cookie.js實(shí)現(xiàn)展示瀏覽網(wǎng)頁的歷史記錄超管用
本文給大家分享利用cookie插件獲取用戶瀏覽文章或者是網(wǎng)頁的歷史記錄,并把用戶最近瀏覽過的信息顯示在頁面,涉及到 jquery.cookie.js相關(guān)知識,感興趣的朋友可以參考下2015-10-10

