可变的下拉菜单是网页中非常常见的一项功能，现在给大家做一个非常简单的实现，原理很简单，本质就是元素的显示与隐藏。代码如下大家试试。

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标签选出的数组的下标一致，所以实现非常简单。大家试一下。