jquery實(shí)現(xiàn)下拉框多選方法介紹

更新時(shí)間：2017年01月03日 09:14:09 作者：冷戰(zhàn)

本文是利用EasyUI實(shí)現(xiàn)下拉框多選功能，在ComboxTree其原有的基礎(chǔ)上對樣式進(jìn)行了改進(jìn)，樣式表已上傳demo，下面跟著小編一起來看下吧

一、說明

本文是利用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í)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

jQuery Trim去除字符串首尾空字符的實(shí)現(xiàn)方法說明
本篇文章主要是對jQuery Trim去除字符串首尾空字符的實(shí)現(xiàn)方法進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
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í)遇到的一些問題筆記
在實(shí)踐中還是遇到了很多的問題，注意在input的checkbox中，用普通的attr屬性來判斷是不可以的，因?yàn)閏hecked的值是checked，因此做個(gè)筆記
2013-11-11
使用jQuery操作HTML的table表格的實(shí)例解析
這篇文章主要介紹了使用jQuery操作HTML的table表格的實(shí)例解析,包括用jQuery獲取表格總行數(shù)的小技巧,需要的朋友可以參考下
2016-03-03
jQuery中的一些小技巧
本文主要總結(jié)了jQuery中的一些小技巧。具有一定的參考價(jià)值，下面跟著小編一起來看下吧
2017-01-01
3種不同的ContextMenu右鍵菜單實(shí)現(xiàn)代碼
本文給大家分享3種不同的ContextMenu右鍵菜單實(shí)現(xiàn)代碼的相關(guān)資料,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2016-11-11
jQuery在html有效在jsp無效的原因及解決方法
最近用jQuery來寫下拉框的選項(xiàng)值的左右移動，放到j(luò)sp里面就不能用了，經(jīng)過測試終于找到了解決方法在此與大家分享下
2013-08-08
jquery實(shí)現(xiàn)的回旋滾動效果完整實(shí)例【附demo源碼下載】
這篇文章主要介紹了jquery實(shí)現(xiàn)的回旋滾動效果,可實(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)事件動態(tài)操作頁面元素樣式的動態(tài)變換實(shí)現(xiàn)該功能,需要的朋友可以參考下
2015-10-10
使用jQuery和ajax代替iframe的方法(詳解)
下面小編就為大家?guī)硪黄褂胘Query和ajax代替iframe的方法(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-04-04