H5版本的Picker三级动态加载

原创

于 2020-04-22 15:30:43 发布 · 1.2k 阅读

本文介绍了在H5环境中如何实现三级联动的Picker组件，以省市区选择为例，通过HTML和JavaScript代码展示了具体实现过程。

在H5中实现三级选项动态加载，最常见的例子，一种是年月日选择，二是省市区选择，以后者为例，撸码如下：

HTML

1 <div class="ui-form-item mbank-front-border-left" id="locationDiv">
2             <label style="text-align: left;">所在区域</label>
3             <input  class=" ui-account-field" id="selectLocation" value="请选择" readonly>
4             <i class="ui-icon-select"></i>
5             <input id="locationVal" type="hidden" value="0">
6 </div>

JS：

  1 <script>
  2 var nameEl = document.getElementById('locationDiv');//大选择框
  3 var inputEl = document.getElementById('selectLocation');//input输入框
  4 
  5 var first = []; /* 省，直辖市 */
  6 var second = []; /* 市 */
  7 var third = []; /* 镇 */
  8 
  9 var selectedIndex = [0, 0, 0]; /* 默认选中的地区 */
 10 
 11 var checked = [0, 0, 0]; /* 已选选项 */
 12 
 13 function creatList(obj, list){
 14   obj.forEach(function(item, index, arr){
 15   var temp = new Object();
 16   temp.text = item.name;
 17   t