首页 > 代码库 > js三级联动

js三级联动

2024-08-28 19:07:48   221人阅读

实例：省市区的三级联动


<body>
<section>
    <a>省份</a>
    <select id="province">
        <option value="http://www.mamicode.com/0">--请选择--</option>
        <option value="http://www.mamicode.com/1">山东</option>  //通过value来区分市的二维数组
        <option value="http://www.mamicode.com/2">山西</option>
    </select>
    <a>城市</a>
    <select id="city">
        <option>--请选择--</option>
    </select>
    <a>区域</a>
    <select id="area">
        <option>--请选择--</option>
    </select>
</section>
</body>
<script>
    var arr = new Array();
    arr[1] = ["莱芜","济南","东营"];
    arr[2] = ["长治","太原","壶关"];
    var provinceInput = document.getElementById("province");
    var cityInput = document.getElementById("city");
    var areaInput = document.getElementById("area");
    //省和市的联动
    provinceInput.onchange = function () {
        cityInput.options.length = 1; //省改变的时候市的长度变为1
        for(var i = 0;i < arr[provinceInput.value].length;i++) {
            cityInput.add(new Option(arr[provinceInput.value][i],value = http://www.mamicode.com/i)); //通过不同的value来选择不同的二维数组添加元素，
在添加option的同时给市添加不同的value以便于区分区的二维数组
        }
    };
var index = new Array(); //山东省下面市的地区
index[0] = ["莱芜1"];
index[1] = ["济南1"];
index[2] = ["东营1"];
var index2 = new Array(); //山西省下面市的地区
index2[0] =["长治1"];
index2[1] =["太原1"];
index2[2] =["壶关1"];


cityInput.onchange = function () {
    areaInput.options.length = 1;
//通过省的value值来区分不同的数组
    if(provinceInput.value =http://www.mamicode.com/= 1){
        for(var i = 0;i < index[cityInput.value].length;i++) {
            areaInput.add(new Option(index[cityInput.value][i]));
        }
    }else if(provinceInput.value =http://www.mamicode.com/= 2){
        for(var i = 0;i < index2[cityInput.value].length;i++) {
            areaInput.add(new Option(index2[cityInput.value][i]));
        }
    }

};

</script>

js三级联动


联系
我们