JavaScript 下拉框联动案例

小灰灰 2021-06-24 16:10 515阅读 0赞

## 功能描述 ##

页面上有两个下拉框，左边显示国家，右边显示城市，左边发生变化的时候，右边下拉选择内容同时发生变化，实现联动效果。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70]

## 分析 ##

*  HTML页面：第一个select标签绑定事件，在改变时触发事件。使用`onchange`。调用方法add1(value)，value表示当前改变的option的值。
    
        <select id="country" style="width: 100px;" onchange="add1(this.value);">
        	<option value="0">--请选择--</option>
        	<option value="1">中国</option>
        	<option value="2">美国</option>
        	<option value="3">日本</option>
        </select>
        <select id="city" style="width: 100px;" >
        	<option value="0">--请选择--</option>
        </select>
 *  创建一个二维数组，存储数据
    
        var arr = new Array(3);
        	arr[0] = [" ", "--请选择--"];
        	arr[1] = ["中国", "南京", "北京", "济南", "青岛"];
        	arr[2] = ["休斯顿", "俄克拉马托", "费城", "底特律", "纽约"];
        	arr[3] = ["日本", "东京", "大阪", "长崎", "广岛"];
 *  查找二维数组中相应的列，得到的也是一个数组。  
    得到id为city的select对象。  
    在第二个select标签中添加构造好的option。
    
        function add1(val) { 
        	remove1();
        	for(var i = 1; i < arr[val].length; i++) { 
        		var option1 = document.createElement("option");
        		var text1 = document.createTextNode(arr[val][i]);
        		option1.appendChild(text1);
        		citysel.appendChild(option1);
        	}
        }
 *  每一次在添加的时候都是追加子节点操作，所以在切换的时候要把旧的option的清空一下，定义一个方法，调用方法即可。
    
        function remove1() { 
        	var options = citysel.getElementsByTagName("option");
        	for(var i = 0; i < options.length; i++) { 
        		citysel.removeChild(options[i]);
        		i--;
        	}
        }

## 代码 ##

<body>
    	<select id="country" style="width: 100px;" onchange="add1(this.value);">
    		<option value="0">--请选择--</option>
    		<option value="1">中国</option>
    		<option value="2">美国</option>
    		<option value="3">日本</option>
    	</select>
    	<select id="city" style="width: 100px;" >
    		<option value="0">--请选择--</option>
    	</select>
    
    </body>
    
    <script type="text/javascript"> var arr = new Array(3); arr[0] = [" ", "--请选择--"]; arr[1] = ["中国", "南京", "北京", "济南", "青岛"]; arr[2] = ["休斯顿", "俄克拉马托", "费城", "底特律", "纽约"]; arr[3] = ["日本", "东京", "大阪", "长崎", "广岛"]; var citysel = document.getElementById("city"); function remove1() { var options = citysel.getElementsByTagName("option"); for(var i = 0; i < options.length; i++) { citysel.removeChild(options[i]); i--; } } function add1(val) { remove1(); for(var i = 1; i < arr[val].length; i++) { var option1 = document.createElement("option"); var text1 = document.createTextNode(arr[val][i]); option1.appendChild(text1); citysel.appendChild(option1); } } </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70]: /images/20210615/be3646cf21b24b73a119bc67f0c95285.png