H5版本的Picker三级动态加载

最新推荐文章于 2024-01-26 11:05:52 发布

velly

最新推荐文章于 2024-01-26 11:05:52 发布

阅读量1.1k

点赞数

分类专栏： H5 javascript

本文链接：https://blog.csdn.net/velly/article/details/105683215

版权

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

摘要由CSDN通过智能技术生成

在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]; /