首页>>表单>>城市下拉选择组件 联动菜单带搜索插件以及原生效果(2017-08-24)

城市下拉选择组件 联动菜单带搜索插件以及原生效果

城市下拉选择组件 联动菜单带搜索插件以及原生效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script type="text/javascript">  
  2.         $(function () {  
  3.   
  4.             //模拟城市-无联动/无搜索  
  5.             var selector = $('#city-picker-selector').cityPicker({  
  6.                 dataJson: cityData,  
  7.                 renderMode: true,  
  8.                 search: false,  
  9.                 linkage: false  
  10.             })  
  11.             $('#city-picker-selector').on('choose-province.citypicker', function(event, tagert, storage) {  
  12.                 console.log(storage);  
  13.             });  
  14.   
  15.             //设置城市  
  16.             selector.setCityVal([{  
  17.                 'id': '110000',  
  18.                 'name': '北京市'  
  19.             }, {  
  20.                 'id': '110100',  
  21.                 'name': '北京市'  
  22.             }, {  
  23.                 'id': '110108',  
  24.                 'name': '海淀区'  
  25.             }]);  
  26.   
  27.             //模拟城市-联动/搜索  
  28.             $('#city-picker-search').cityPicker({  
  29.                 dataJson: cityData,  
  30.                 renderMode: true,  
  31.                 search: true,  
  32.                 linkage: true  
  33.             });  
  34.   
  35.             //原生城市-无联动  
  36.             var select = $('.city-picker-select').cityPicker({  
  37.                 dataJson: cityData,  
  38.                 renderMode: false,  
  39.                 linkage: false  
  40.             });  
  41.   
  42.             //设置城市  
  43.             select.setCityVal([{  
  44.                 'id': '140000',  
  45.                 'name': '山西省'  
  46.             }, {  
  47.                 'id': '140100',  
  48.                 'name': '太原市'  
  49.             }, {  
  50.                 'id': '140105',  
  51.                 'name': '小店区'  
  52.             }]);  
  53.         });  
  54.     </script>  

 


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