首页>>表单>>下拉框多选,包括弹出层多选,分组多选(2019-07-24)

下拉框多选,包括弹出层多选,分组多选

下拉框多选,包括弹出层多选,分组多选
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <form class="demo-example">  
  2.         <label for="people">Select people:</label>  
  3.         <select id="people" name="people" multiple>  
  4.             <option value="alice">Alice</option>  
  5.             <option value="bob">Bob</option>  
  6.             <option value="carol">Carol</option>  
  7.         </select>  
  8.     </form>  
  9.   
  10.     <form class="demo-example">  
  11.         <label for="categories">Show:</label>  
  12.         <select id="categories" name="categories" multiple>  
  13.             <option value="a">Abandoned vehicles</option>  
  14.             <option value="b">Bus stops</option>  
  15.             <option value="c">Car parking</option>  
  16.             <option value="d">Dog fouling</option>  
  17.         </select>  
  18.     </form>  
  19.   
  20.     <div class="demo-example position-menu-within">  
  21.         <label for="line-wrap-example">Line wrap example</label>  
  22.         <select id="line-wrap-example" multiple>  
  23.             <option>The final option…</option>  
  24.             <option>Should wrap onto…</option>  
  25.             <option>Multiple lines, to avoid expanding outside the grey wrapper</option>  
  26.         </select>  
  27.     </div>  
  28.   
  29.     <form class="demo-example modal-example">  
  30.         <label for="modal-example">Modal example</label>  
  31.         <select id="modal-example" name="inventors" multiple>  
  32.             <option value="al">Ada Lovelace</option>  
  33.             <option value="gh">Grace Hopper</option>  
  34.             <option value="hl">Hedy Lamarr</option>  
  35.             <option value="mk">Margaret E. Knight</option>  
  36.             <option value="sj">Shirley Ann Jackson</option>  
  37.         </select>  
  38.     </form>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.     $(function(){  
  3.         $('#people').multiSelect();  
  4.         $('#line-wrap-example').multiSelect({  
  5.             positionMenuWithin: $('.position-menu-within')  
  6.         });  
  7.         $('#categories').multiSelect({  
  8.             noneText: 'All categories',  
  9.             presets: [  
  10.                 {  
  11.                     name: 'All categories',  
  12.                     options: []  
  13.                 },  
  14.                 {  
  15.                     name: 'My categories',  
  16.                     options: ['a', 'c']  
  17.                 }  
  18.             ]  
  19.         });  
  20.         $('#modal-example').multiSelect({  
  21.             'modalHTML': '<div class="multi-select-modal">'  
  22.         });  
  23.     });  
  24.     </script>  

 


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