JavaScript实现三级联动效果

三级联动：是平时需要在网页上选择的省市县对应位置的下拉条模块。选择省份位置时，市场展望后的下拉框会更新到所选省份，与县区类似。

！doctype html htmlheadlang=' en ' metacarset=' utf-8 ' title三级联动/title/head dyselect id=' sheng ' option value=' '-请选择-/option！-首先，创建三个下拉列，分别对应省、市、县-/select select select id='石' option value=' '-请选择-/option/selectselect id='贤' option value=' '-请选择-/option/select script var o sheng=document . getelementbyid(' sheng ')；var oshi=document . getelementbyid(' Shi ')；var oxian=document . getelementbyid(' xian ')；Var arr_sheng=['陕西省'，'云南省'，'四川省'，'山西省']！-创建一维数组，存储省级值-vararr _ Shi=[！-创建一个二维数组，最外层的每个元素对应省份-['Xi '安'，'咸阳'，'宝鸡'，'渭南']！-数组中的第一个元素定义了一个城市数组的值-['昆明'，'大理'，'丽江'，'西双版纳'，['乐山'，'成都'，'大同'，'高科技城市']，['太原'，'屏幕显示城市' var arr_xian=[！-创建一个三维数组，每个元素在最外层(对应省份)-[！-数组中定义了四个数组(对应城市)——[' Xi '安1 '，' Xi '安2']，['咸阳1 '，'咸阳2']，['宝鸡1 '，'宝鸡2']，['渭南1 '，'渭南2']，-数组中定义了两个元素(对应县域)——[['昆明1 '，'昆明2']，['大理1 '，'大理2']，['丽江1 '，'丽江2']，['西双版纳1 '，'西双版纳2']，[[ 2']，['太原1 '，'太原2']，['平贤1 '，'平贤2']，['乐宝1 '，'乐宝2']，['李卫1 '，'李卫2 ']；var quanju _ arr//创建一个全局对象，用于存储中间数组functioninput _ arr (arr，event){//封装一个函数，用于将(var i=0)的元素添加到下拉框中；长度；I ){//下拉列中的元素来自数组中的元素，遍历数组var option=new Option(arr[i]，I)；//创建一个Option对象(这个o应该大写)并存储值event . appendchild(Option)；//在事件对象的末尾添加选项}} input_arr(arr_sheng，Osh eng)；//调用，将元素osheng.onchange=function()添加到省级下拉框{//将事件绑定到下拉框(当下拉框元素发生变化时执行)oshi . options . length=1；//当省份下拉框发生变化时，清空城市下拉框中的元素oxian . options . length=1；//当省的下拉框发生变化时，清空县的下拉框中的元素var index=this.value//每个选项标签都有一个值索引，用于选择数组中的元素。var arr _ Shi _ next=arr _ Shi[index]；//获取当前选中省份的city元素，并将其赋给一个数组quan ju _ arr=arr _ xian[index]；//获取当前所选省市的县元素，并将其分配给定义的中间数组input_arr(arr_shi_next，oshi)；//调用将元素添加到城市下拉框} oshi . onchange=function(){ oxian . options . length=1；var索引=this.valuevar arr _ xian _ next=quan ju _ arr[index]；input_arr(arr_xian_next，oxian)；//调用，添加元素到县下拉框}/脚本/正文/html以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。