zoukankan      html  css  js  c++  java

  • 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.         '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.         '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  
  • 相关阅读:
    【NOIP 2003】 加分二叉树
    【POJ 1655】 Balancing Act
    【HDU 3613】Best Reward
    【POJ 3461】 Oulipo
    【POJ 2752】 Seek the Name, Seek the Fame
    【POJ 1961】 Period
    【POJ 2406】 Power Strings
    BZOJ3028 食物（生成函数）
    BZOJ5372 PKUSC2018神仙的游戏（NTT）
    BZOJ4836 二元运算（分治FFT）
  • 原文地址：https://www.cnblogs.com/keyi/p/6962828.html
Copyright © 2011-2022 走看看