省市县级联

<html>

<head>

<title>JS中的级联功能</title>
<script
type="text/javascript">
    //初始化省份

window.onload = function provinceInit()
    {


        var
node =
document.getElementById("province");

var provinceArr =
["安徽省","山东省","湖北省"];

node.options.length = 1;//设置下拉的个数

var newOption;
        for(var i in
provinceArr){

//option["value值","页面显示值"]

newOption = new
Option(provinceArr[i],provinceArr[i]);

//node.add(newOption);

//循环添加到node

node.options.add(newOption);

}
    }

//省份改变的时候,为city下拉赋值
    function
provinceChange()

{
        var
node=document.getElementById("city");

var cityList = new Array();

cityList["安徽省"] =
["安庆","芜湖","阜阳","马鞍山","亳州","池州","淮南"];

cityList["山东省"] =
["济南","青岛","淄博","枣庄","东营","烟台","潍坊"];

cityList["湖北省"] =
["武汉","宜昌","荆州","恩施","黄石","荆门","黄冈"];

var proValue =
document.getElementById("province").value;

node.options.length =
1;//清空city的下拉
        var
newOption;

//注意这里是cityList[proValue]
        for(var
i in
cityList[proValue]){

newOption = new
Option(cityList[proValue][i],cityList[proValue][i]);

//node.options.add(newOption);

node.add(newOption);

}
        node.selectedIndex = 0;
//让select出现 "请选择城市"
    }
   function
cityChange()
   {

var
node=document.getElementById("country");

var countryList = new Array();

countryList["安庆"] =
["望江","宿松","太湖","潜山","广安","雅安","眉山"];

countryList["芜湖"] =
["南陵","无为","繁昌","枣庄","东营","烟台","潍坊"];


        var cityValue =
document.getElementById("city").value;

node.options.length =
1;//清空city的下拉，防止城市已累加的形式下拉
        var
newOption;


        for(var i in
countryList[cityValue]){

newOption = new
Option(countryList[cityValue][i],countryList[cityValue][i]);



node.add(newOption); //给县级下拉菜单赋值

}


}

</script>
</head>

<body>
<select
name="province" id="province"
onchange="provinceChange();">
    <option
value="0">--请选择省份--</option>
</select>
<select
name="city" id="city" onchange="cityChange();">

<option
value="0">--请选择城市--</option>
</select>
<select
name="country" id="country">
    <option
value="0">--请选择县级--</option>
</select>
</body>
</html>

时间： 2024-12-05 07:47:27

省市县级联

省市县级联的相关文章

省市县级联，使用ajax，并且使用ul模拟select下拉

省市县级联前端html页面

ajax + php 省市区三级联动

zTree实现地市县三级级联报错（三）

zTree实现地市县三级级联DAO接口

zTree实现地市县三级级联DAO接口实现

zTree实现地市县三级级联DAO接口测试

zTree实现地市县三级级联Service接口

zTree实现地市县三级级联Service接口实现