可变的下拉菜单是网页中非常常见的一项功能,现在给大家做一个非常简单的实现,原理很简单,本质就是元素的显示与隐藏。代码如下大家试试。
HTML
<select id="shaanxi">
<option value="1">西安市</option>
<option value="2">铜川市</option>
<option value="3">宝鸡市</option>
</select>
<select>
<option>未央区</option>
<option>莲湖区</option>
<option>新城区</option>
<option>碑林区</option>
<option>雁塔区</option>
</select>
<select style="display:none;">
<option>耀州区</option>
<option>王益区</option>
<option>印台区</option>
<option>宜君县</option>
</select>
<select style="display:none;">
<option>金台区</option>
<option>渭滨区</option>
<option>千阳县</option>
<option>眉 县</option>
<option>凤 县</option>
</select>
JS
window.onload = function() {
var shaanxi = document.getElementById("shaanxi");
var select = document.getElementsByTagName("select");
var selected = 1;
shaanxi.onchange = function() {
select[selected].style.display = "none";
select[this.value].style.display = "inline";
selected = this.value;
}
};
在JS代码中增加了一个变量用来保存选中的市对应的value值,这个值正好与select标签选出的数组的下标一致,所以实现非常简单。大家试一下。