原生js封装二级城市下拉列表的实现代码

闲的蛋疼，封装了个二级城市下拉 先保证html里有 <SPAN xss=removed>&lt;select id="province" size=1 &gt; &lt;/select&gt; &lt;select id="city" style="width:60px"&gt; &lt;/select&gt; &lt;input type="hidden" id="pro_city" /&gt;</SPAN> 然后引用js  最终通过new SelectCity()  调用。  懒得分离这里js就写在页面了 一言不合上代码 &lt;html&gt; &lt;head&gt; &lt;meta cha 【知识点详解】 在网页开发中，常常需要实现二级联动的城市选择功能，比如在注册或填写地址时。这个功能可以通过JavaScript来实现，特别是原生JS，它可以帮助我们避免依赖任何外部库，如jQuery等。本话题将详细介绍如何使用原生JavaScript封装一个二级城市下拉列表。 HTML结构是实现这个功能的基础。在描述中提到了以下HTML代码片段： ```html <select id="province" size=1></select> <select id="city" style="width:60px"></select> <input type="hidden" id="pro_city" /> ``` 这段代码包括两个`<select>`元素，分别用于展示省份和城市，以及一个隐藏的`<input>`元素用于存储用户选定的省份和城市信息。 接下来，创建一个JavaScript类`SelectCity`来封装这个功能。在这个类中，初始化方法`init`负责加载数据。在这个例子中，数据被硬编码为多个数组，每个数组代表一个省份及其下属的城市。例如，`this.proArr`存储了所有省份的名称，而`this.arr`则存储了每个省份对应的子城市。 ```javascript function SelectCity() { this.init(); } SelectCity.prototype = { init: function() { this.arr = new Array(); // 省份数据 this.proArr = ['北京', '上海', ...]; // 城市数据，每个索引对应一个省份 this.arr[0] = "东城,西城,..."; this.arr[1] = "黄浦,卢湾,..."; // ... } } ``` 当实例化`SelectCity`类并调用`new SelectCity()`后，会触发`init`方法，填充省份和城市的数据。然后，我们需要监听`province`下拉框的`onchange`事件，以便在省份改变时更新城市选项： ```javascript document.getElementById('province').addEventListener('change', function() { var index = this.selectedIndex; var citySelect = document.getElementById('city'); citySelect.innerHTML = ''; if (index > -1) { var cities = SelectCity.prototype.arr[index].split(','); for (var i = 0; i < cities.length; i++) { var option = document.createElement('option'); option.value = cities[i]; option.text = cities[i]; citySelect.appendChild(option); } } }); ``` 这段代码首先获取当前选中的省份索引，然后清空`city`下拉框的所有选项。如果省份已选择，就将对应城市的列表拆分为数组，并为每个城市创建一个新的`<option>`元素，添加到`city`下拉框中。 为了保存用户的选中值，可以监听`city`下拉框的`onchange`事件，将选中的省份和城市值存入`pro_city`隐藏字段： ```javascript document.getElementById('city').addEventListener('change', function() { var province = document.getElementById('province').value; var city = this.value; document.getElementById('pro_city').value = province + ',' + city; }); ``` 以上就是使用原生JavaScript实现二级城市下拉列表的基本步骤。这种方法简洁高效，但需要注意的是，实际项目中可能需要从服务器动态获取数据，而不是像示例那样硬编码。此外，如果城市数量庞大，可能需要考虑性能优化，如懒加载或使用搜索功能。