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  
  • 相关阅读:
    包含了访问命名服务的类和接口
    JNDI架构提供了一组标准的独立于命名系统的API
    利用JNDI的命名与服务功能来满足企业级API对命名与服务的访问
    JNDI(Java Naming and Directory Interface,Java命名和目录接口)
    Servlet 国际化
    重要的调试技巧
    使用 JDB 调试器
    Servlet 调试
    Servlet 打包部署
    编译包中的 Servlet
  • 原文地址：https://www.cnblogs.com/keyi/p/6962828.html
Copyright © 2011-2022 走看看