首页>>表单>>可清空select选择 单选和多选(2024-05-08)

可清空select选择 单选和多选

可清空select选择 单选和多选
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="select_group">  
  2.     <div class="select_box">  
  3.       <h2>可清空多选</h2>  
  4.       <p>包含清空按钮，可将选择器清空为初始状态</p>  
  5.       <div class="select_item provinces_region_box">  
  6.         <select style="display: none;" id="provincesRegion" multiple placeholder="省份地区" name="" code=""></select>  
  7.       </div>  
  8.     </div>  
  9.     <div class="select_box">  
  10.       <h2>可清空单选</h2>  
  11.       <p>包含清空按钮，可将选择器清空为初始状态</p>  
  12.       <div class="select_item releace_time_box">  
  13.         <select style="display: none;" id="releaceTime" placeholder="发布时间" name="" code=""> </select>  
  14.       </div>  
  15.     </div>  
  16.   </div>  

 

JavaScript Code
  1. <script>  
  2.   //省份地区-多选  
  3.   $('.provinces_region_box').dropdown({  
  4.     defaultdata: [{ "selected": false, "name": "全选", "id": "all" }], //默认数据-全选或不限  
  5.     data: [  
  6.       { "selected": false, "name": "北京", "id": "11000" },  
  7.       { "selected": false, "name": "天津", "id": "12000" },  
  8.       { "selected": false, "name": "河北", "id": "13000" },  
  9.       { "selected": false, "name": "山西", "id": "14000" },  
  10.       { "selected": false, "name": "内蒙古", "id": "150000" },  
  11.       { "selected": false, "name": "辽宁", "id": "210000" },  
  12.       { "selected": false, "name": "吉林", "id": "220000" },  
  13.       { "selected": false, "name": "黑龙江", "id": "230000" },  
  14.       { "selected": false, "name": "上海", "id": "310000" },  
  15.       { "selected": false, "name": "江苏", "id": "320000" },  
  16.       { "selected": false, "name": "浙江", "id": "330000" },  
  17.       { "selected": false, "name": "安徽", "id": "340000" },  
  18.     ],  
  19.     readonly: false, //是否禁用  
  20.     searchable: false, //下拉区域是否显示搜索框  
  21.     limitCount: 2000, //限制数据总量  
  22.     multipleMode: '', // 标记项模式 空字符串：文本模式 / 'label':标记项模式 / 'unfilling':内容不填充到输入框  
  23.     choice: function (ele) { //选中返回（多选）  
  24.       console.log(ele);  
  25.     },  
  26.     del: function () {  
  27.       console.log('删除:', '初始化页面数据');  
  28.     }  
  29.   });  
  30.   
  31.   //发布时间-单选  
  32.   $('.releace_time_box').dropdown({  
  33.     defaultdata: [{ "selected": false, "name": "全部", "id": "" }],  
  34.     data: [  
  35.       { "selected": false, "name": "近7天", "id": "7" },  
  36.       { "selected": false, "name": "近一个月", "id": "30" },  
  37.       { "selected": false, "name": "近三个月", "id": "90" },  
  38.       { "selected": false, "name": "近半年", "id": "180" }  
  39.     ],  
  40.     readonly: false,  
  41.     searchable: false,  
  42.     limitCount: 2000,  
  43.     multipleMode: '',  
  44.     choice: function (ele) { //单选-直接跳链接  
  45.       console.log(ele);  
  46.     },  
  47.     del: function () {  
  48.       console.log('删除:', '初始化页面数据');  
  49.     }  
  50.   });  
  51.   
  52. </script>  

 


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