使用原生JS实现三级联动选择效果

"原生js三级联动的简单实现代码示例" 在网页开发中，三级联动是一种常见的交互设计，常用于地区选择、分类导航等场景。这个例子展示了如何使用原生JavaScript实现一个简单的三级联动效果，即省份、城市和区县的联动选择。下面将详细解析这段代码的工作原理和实现步骤。 首先，HTML部分只包含一个id为"div"的元素，用于后续JavaScript动态插入`<select>`元素。在JavaScript中，我们首先获取到这个div元素，并创建三个`<select>`元素：`sheng`代表省份，`shi`代表城市，`qu`代表区县。 接着，为每个`<select>`元素添加默认选项，"请选择省"、"请选择市"和"请选择区"，并分别设置它们的值为"-1"。这一步是为用户在未做选择时提供一个提示。 然后，通过`for`循环遍历预先定义好的`city`数组（假设它包含了省份、城市和区县的数据结构），为省份的`<select>`元素填充数据。每个省份的名称作为option的文本，数组索引作为value值。 当用户在省份的`<select>`中做出选择时，会触发`onchange`事件。在这个事件处理函数中，首先恢复城市和区县的默认选项，清空它们的已有选项，然后根据所选省份的索引，遍历对应的city数组，为城市`<select>`填充对应的城市选项。同样的逻辑应用于城市`<select>`，当城市被选中时，根据城市索引更新区县的`<select>`选项。 在实际应用中，`city`数组通常会是一个嵌套的对象数组，例如： ```javascript var city = [ { name: '省份1', city: [ { name: '城市1', id: 1 }, { name: '城市2', id: 2 } ] }, { name: '省份2', city: [ { name: '城市3', id: 3 }, { name: '城市4', id: 4 } ] } ]; ``` 在这个数据结构中，每个省份是一个对象，包含一个name属性和一个city属性，city属性是一个包含城市对象的数组。每个城市对象有name和id属性，id用于区分不同的城市。 实现三级联动的关键在于监听每个级联下拉框的`onchange`事件，然后根据用户的选择动态更新下一级别的选项。这种动态加载和更新选项的方法可以提高页面性能，避免一次性加载所有数据导致的页面加载延迟。 在实际项目中，为了增强用户体验，可以考虑添加一些额外的功能，比如禁用默认选项，使用户必须做出选择；或者添加错误处理，当用户没有做出选择时给出提示。此外，还可以利用AJAX从服务器获取数据，实现更灵活的数据更新。