首页>>表单>>支持搜索的下拉菜单多选 select框多选,支持移动端(2018-12-02)

支持搜索的下拉菜单多选 select框多选,支持移动端

支持搜索的下拉菜单多选 select框多选,支持移动端
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="container">  
  2.   <h2> Searchable Multi-select Dropdown Demos</h2>  
  3.   <br>  
  4.   <div class="row">  
  5.     <div class="col-sm-4">  
  6.       <div class="text-info">Multi-select+JSON+Token Mode</div>  
  7.       <br>  
  8.       <div class="dropdown-mul-1">  
  9.         <select style="display:none"  name="" id="" multiple placeholder="Select">  
  10.         </select>  
  11.       </div>  
  12.     </div>  
  13.   </div>  
  14.   <br>  
  15.   <br>  
  16.   <div class="row">  
  17.     <div class="col-sm-4">  
  18.       <div class="text-info">Multi-select+Option</div>  
  19.       <br>  
  20.       <div class="dropdown-mul-2">  
  21.         <select style="display:none"  name="" id="mul-2" multiple placeholder="Select">  
  22.           <option value="1" selected>1</option>  
  23.           <option value="2">2</option>  
  24.           <option value="3">3</option>  
  25.           <option value="4">4</option>  
  26.           <option value="5">5</option>  
  27.           <option value="3" selected>Selected</option>  
  28.           <option value="4" disabled>4</option>  
  29.           <option value="5">5</option>  
  30.           <option value="6">6</option>  
  31.         </select>  
  32.       </div>  
  33.     </div>  
  34.   </div>  
  35.   <br>  
  36.   <br>  
  37.   <div class="row">  
  38.     <div class="col-sm-4">  
  39.       <div class="text-info">Single Mode</div>  
  40.       <br>  
  41.       <div class="dropdown-sin-1">  
  42.         <select style="display:none"  placeholder="Select">  
  43.           <option value="1">1</option>  
  44.           <option value="2">2</option>  
  45.           <option value="3">3</option>  
  46.           <option value="4">4</option>  
  47.           <option value="5">5</option>  
  48.           <option value="6">6</option>  
  49.           <option value="7">7</option>  
  50.           <option value="8">8</option>  
  51.           <option value="9">9</option>  
  52.           <option value="10">10</option>  
  53.           <option value="11">11</option>  
  54.           <option value="12">12</option>  
  55.         </select>  
  56.       </div>  
  57.     </div>  
  58.   </div>  
  59.   <br>  
  60.   <br>  
  61.   <div class="row">  
  62.     <div class="col-sm-4">  
  63.       <div class="text-info">10000+ Entries</div>  
  64.       <br>  
  65.       <div class="dropdown-sin-2">  
  66.         <select style="display:none" multiple placeholder="Select">  
  67.         </select>  
  68.       </div>  
  69.     </div>  
  70.   </div>  
  71. </div>  
  72. <script>  
  73.     var Random = Mock.Random;  
  74.     var json1 = Mock.mock({  
  75.       "data|10-50": [{  
  76.         name: function () {  
  77.           return Random.name(true)  
  78.         },  
  79.         "id|+1": 1,  
  80.         "disabled|1-2": true,  
  81.         groupName: 'Group Name',  
  82.         "groupId|1-4": 1,  
  83.         "selected": false  
  84.       }]  
  85.     });  
  86.   
  87.     $('.dropdown-mul-1').dropdown({  
  88.       data: json1.data,  
  89.       limitCount: 40,  
  90.       multipleMode: 'label',  
  91.       choice: function () {  
  92.         // console.log(arguments,this);  
  93.       }  
  94.     });  
  95.   
  96.     var json2 = Mock.mock({  
  97.       "data|10000-10000": [{  
  98.         name: function () {  
  99.           return Random.name(true)  
  100.         },  
  101.         "id|+1": 1,  
  102.         "disabled": false,  
  103.         groupName: 'Group Name',  
  104.         "groupId|1-4": 1,  
  105.         "selected": false  
  106.       }]  
  107.     });  
  108.   
  109.     $('.dropdown-mul-2').dropdown({  
  110.       limitCount: 5,  
  111.       searchable: false  
  112.     });  
  113.   
  114.     $('.dropdown-sin-1').dropdown({  
  115.       readOnly: true,  
  116.       input: '<input type="text" maxLength="20" placeholder="Search">'  
  117.     });  
  118.   
  119.     $('.dropdown-sin-2').dropdown({  
  120.       data: json2.data,  
  121.       input: '<input type="text" maxLength="20" placeholder="Search">'  
  122.     });  
  123.   </script>  
  124. </div>  

 


原文地址:http://www.freejs.net/article_biaodan_727.html