首页>>表单>>支持搜索过滤和ajax的select下拉框(2020-09-27)

支持搜索过滤和ajax的select下拉框

支持搜索过滤和ajax的select下拉框
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="content">  
  2.             <div class="row">  
  3.                 <div class="cell">  
  4.                     <div class="desc">这个例子使用静态的选项数据</div>  
  5.                     <select id="select1" style="width: 100%;">  
  6.                         <option value="-1">湖北</option>  
  7.                         <option value="1">湖南</option>  
  8.                         <option value="2">北京</option>  
  9.                         <option value="3">广东</option>  
  10.                         <option value="4">广西</option>  
  11.                         <option value="5">上海</option>  
  12.                         <option value="6">浙江</option>  
  13.                         <option value="7">江苏</option>  
  14.                     </select>  
  15.                 </div>  
  16.                 <div class="cell">  
  17.                     <div class="desc">这个例子不提供搜索过滤功能</div>  
  18.                     <select id="select2" style="width: 100%;">  
  19.                         <option value="-1">湖北</option>  
  20.                         <option value="1">湖南</option>  
  21.                         <option value="2" selected>北京</option>  
  22.                         <option value="3">广东</option>  
  23.                         <option value="4">广西</option>  
  24.                         <option value="5">上海</option>  
  25.                         <option value="6">浙江</option>  
  26.                         <option value="7">江苏</option>  
  27.                     </select>  
  28.                 </div>  
  29.             </div>  
  30.             <div class="row">  
  31.                 <div class="cell">  
  32.                     <div class="desc">这个例子从file.json加载数据。不带初始选项。带搜索过滤功能。</div>  
  33.                     <select id="select3" style="width: 100%;">  
  34.                         <option value="-1">---</option>  
  35.                     </select>  
  36.                 </div>  
  37.                 <div class="cell">  
  38.                     <div class="desc">这个例子从file.json加载数据。带初始选项。不带搜索过滤功能。</div>  
  39.                     <select id="select5" style="width: 340px;">  
  40.                         <option value="1">abc</option>  
  41.                     </select>  
  42.                 </div>  
  43.             </div>  
  44.             <div class="row">  
  45.                 <div class="cell">  
  46.                     <div class="desc">Note: 插件在json数据格式不正确时会得到错误的结果。</div>  
  47.                     <select id="select4">  
  48.                         <option value="-1">---</option>  
  49.                     </select>  
  50.                 </div>  
  51.             </div>  
  52.         </div>  

 

JavaScript Code
  1. <script>  
  2.     /* This parser won't respect "---" selection */  
  3.     function dataParserA(data, selected) {  
  4.         retval = [ { val: "-1" , text: "---" } ];  
  5.   
  6.         data.forEach(function(v){  
  7.             if(selected == "-1" && v.val == 3)  
  8.                 v.selected = true;  
  9.             retval.push(v);   
  10.         });  
  11.   
  12.         return retval;  
  13.     }  
  14.   
  15.     /* This parser let's the component to handle selection */  
  16.     function dataParserB(data, selected) {  
  17.         retval = [ { val: "-1" , text: "---" } ];  
  18.         data.forEach(function(v){ retval.push(v); });  
  19.         return retval;  
  20.     }  
  21.   
  22.     /* Create select elements */  
  23.     $("#select1").tinyselect();  
  24.     $("#select2").tinyselect({ showSearch: false });  
  25.     $("#select3").tinyselect({ dataUrl: "file.json" , dataParser: dataParserA });  
  26.     $("#select4").tinyselect({ dataUrl: "failure.json" });  
  27.     $("#select5").tinyselect({ dataUrl: "file.json" , dataParser: dataParserB });  
  28.   
  29.     $("#select2").on("change",function() {  
  30.         console.log($(this).val());  
  31.     });  
  32.   
  33.     $("#havoc").show()  
  34.   
  35.     </script>  

 


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