web之家  
select下拉框

使用select2实现多选select下拉框


 
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5.     <meta name="renderer" content="webkit|ie-comp|ie-stand">  
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />  
  8.     <meta http-equiv="Cache-Control" content="no-siteapp" />  
  9. <link type="text/css" rel="stylesheet" href="C:/Users/Administrator/Desktop/select2Demo/bootstrap.min.css"/>  
  10. <link type="text/css" rel="stylesheet" href="C:/Users/Administrator/Desktop/select2Demo/select2.min.css"/>  
  11.   
  12. <script type="text/javascript" src="C:/Users/Administrator/Desktop/select2Demo/jquery-1.7.1.js"></script>  
  13. <script type="text/javascript" src="C:/Users/Administrator/Desktop/select2Demo/select2.js"></script>  
  14.   
  15. </head>  
  16. <body>  
  17. <div id="body">  
  18. <table class="table table-bordered table-striped" width="800" border="none" cellspacing="0" cellpadding="0">  
  19.     <tbody>  
  20.         <tr>  
  21.             <td align="right">多选标签：</td>   
  22.             <td>  
  23.                 <select class="combox" id="sel_productTag" name="tagId" multiple>   
  24.                     <optgroup label="子辈">  
  25.                         <option value="kakaxi">卡卡西</option>  
  26.                         <option value="mingren">鸣人</option>  
  27.                         <option value="zuozhu">佐助</option>  
  28.                         <option value="xiaoying">小樱</option>  
  29.                     </optgroup>  
  30.                     <optgroup label="父辈">  
  31.                         <option value="bofengshuimen">波风水门</option>  
  32.                         <option value="dashewan">大蛇丸</option>  
  33.                         <option value="gangshou">纲手</option>  
  34.                         <option value="自来也">自来也</option>  
  35.                     </optgroup>  
  36.                 </select>  
  37.             </td>  
  38.         </tr>  
  39.         <tr>  
  40.             <td align="right">单选标签：</td>  
  41.             <td>  
  42.                 <select class="combox" id="sel_recommender" name="recommenderId">   
  43.                     <option value="">请选择...</option>  
  44.                     <optgroup label="子辈">  
  45.                         <option value="kakaxi">卡卡西</option>  
  46.                         <option value="mingren">鸣人</option>  
  47.                         <option value="zuozhu">佐助</option>  
  48.                         <option value="xiaoying">小樱</option>  
  49.                     </optgroup>  
  50.                     <optgroup label="父辈">  
  51.                         <option value="bofengshuimen">波风水门</option>  
  52.                         <option value="dashewan">大蛇丸</option>  
  53.                         <option value="gangshou">纲手</option>  
  54.                         <option value="自来也">自来也</option>  
  55.                     </optgroup>  
  56.                 </select>  
  57.             </td>  
  58.         </tr>  
  59.     </tbody>  
  60. </table>  
  61. </div>  
  62.   
  63. <script type="text/javascript">  
  64. $(function(){  
  65.     $('#sel_productTag').select2({  
  66.         placeholder: "请至少选择一个人名",  
  67.         tags:true,  
  68.         createTag:function (decorated, params) {  
  69.             return null;  
  70.         },  
  71.         width:'256px'  
  72.     });  
  73.   
  74.     function formatState (state) {  
  75.         if (!state.id) { return state.text; }  
  76.         var $state = $(  
  77.         '<span>' + state.text + '</span>'  
  78.         );  
  79.         return $state;  
  80.     };  
  81.   
  82.     $('#sel_recommender').select2({  
  83.         placeholder: "请选择一个人名",  
  84.         templateResult: formatState,  
  85.         width:'256px'  
  86.     });  
  87. });  
  88. </script>  
  89. </body>  
  90. </html>  

 

 

 

事件：

 

  1. //置空  
  2. $eventSelect.val(null).trigger("change");  
  3. //选中  
  4. $eventSelect.on("selected", function (e) { })  
  5. //移除  
  6. $eventSelect.on("removed", function () {  
  7. })  
  8. //多个事件  
  9. $eventSelect.on("close removed", function () { })  
  10.   
  11. // 获取value和text  
  12. $("#xa").val();  
  13. $("#xa").select2("val");  
  14. $("#xa").select2('data').text  

 

 

 

posted on 2017-06-08 14:59  路修远而求索  阅读(299)  评论(0)  编辑  收藏  举报
 
Copyright © 2024 路修远而求索
Powered by .NET 9.0 on Kubernetes
博客园