[示例]省市二级联动菜单

by admin on 2020年1月28日

<select id=”province” onChange=”xxx(this.options[this.selectedIndex].value);”>
   <option>请选择省份…</option>
</select>

JS制作简单的三级联动,

用javascript制作的一个简单三级联动,非常简单实用

复制代码 代码如下:
<!DOCTYPE html>
<html>
    <head>
        <meta charset=”utf-8″>
        <title></title>
    </head>
    <body>
        省:
        <select style=”width: 100px;” id=”pre”
onchange=”chg(this);”>
            <option value=”-1″>请选择</option>
        </select>
        市:
        <select style=”width: 100px;” id=”city” onchange=”chg2(this)”
;></select>
        区:
        <select style=”width: 100px;” id=”area”></select>
    </body>
    <script>
         //声明省
        var pres = [“北京”, “上海”, “山东”]; //直接声明Array
         //声明市
        var cities = [
            [“东城”, “昌平”, “海淀”],
            [“浦东”, “高区”],
            [“济南”, “青岛”]
        ];
        var areas = [
                [
                    [“东城1”, “东城2”, “东城3”],
                    [“昌平1”, “昌平2”, “昌平3”],
                    [“海淀1”, “海淀2”, “海淀3”]
                ],
                [
                    [“浦东1”, “浦东2”, “浦东3”],
                    [“高区1”, “高区2”, “高区3”]
                ],
                [
                    [“济南1”, “济南2”],
                    [“青岛1”, “青岛2”]
                ]
            ]
            //设置一个省的公共下标
        var pIndex = -1;
        var preEle = document.getElementById(“pre”);
        var cityEle = document.getElementById(“city”);
        var areaEle = document.getElementById(“area”);
         //先设置省的值
        for (var i = 0; i < pres.length; i++) {
            //声明option.<option
value=”pres[i]”>Pres[i]</option>
            var op = new Option(pres[i], i);
            //添加
            preEle.options.add(op);
澳门新葡亰信誉平台游戏,        }
        function chg(obj) {
            if (obj.value == -1) {
                cityEle.options.length = 0;
                areaEle.options.length = 0;
            }
            //获取值
            var val = obj.value;
            pIndex = obj.value;
            //获取ctiry
            var cs = cities[val];
            //获取默认区
            var as = areas[val][0];
            //先清空市
            cityEle.options.length = 0;
            areaEle.options.length = 0;
            for (var i = 0; i < cs.length; i++) {
                var op = new Option(cs[i], i);
                cityEle.options.add(op);
            }
            for (var i = 0; i < as.length; i++) {
                var op = new Option(as[i], i);
                areaEle.options.add(op);
            }
        }
        function chg2(obj) {
            var val = obj.selectedIndex;
            var as = areas[pIndex][val];
            areaEle.options.length = 0;
            for (var i = 0; i < as.length; i++) {
                var op = new Option(as[i], i);
                areaEle.options.add(op);
            }
        }
    </script>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

用javascript制作的一个简单三级联动,非常简单实用 复制代码 代码如下:
!DOCTYPE html html head meta charset=”utf-8″ title/t…

第一种case判断省份,添加

<select id=”city”>
   <option>请选择城市…</option>
</select>
<script language=”javascript”>
var citys=[
[‘北京’,[[‘北京’],[‘通县’],[‘昌平’],[‘大兴’],[‘密云’],[‘延庆’],[‘顺义’],[‘怀柔’],[‘平台’]]],
[‘上海’,[[‘上海市’],[‘嘉定’],[‘松江’],[‘南汇’],[‘奉贤’],[‘川沙’],[‘青浦’],[‘崇明’],[‘金山’]]]
];

html:

var prov = document.getElementById(‘province’);
var city = document.getElementById(‘city’);
city.style.display = ‘none’;
for(var i = 0; i < citys.length; i++)
{
    prov.options[i+1] = new Option(citys[i][0],i);
}
function xxx(k)
{
    city.style.display = ”;
    for(var i = 0; i <citys[k][1].length; i++)
    {
        city.options[i+1] = new Option(citys[k][1][i],i);
    }
}
</script>

<body>
<form action=”” method=”post” name=”myForm”>
<select id=”selProvince” onchange=”changeCity()”>
<option>–选择省份–</option>
<option value=”河南省”>河南省</option>
<option value=”河北省”>河北省</option>
<option value=”山东省”>山东省</option>
<option value=”四川省”>四川省</option>
</select>
<select id=”selCity”>
<option>–选择城市–</option>
</select>
</form>
</body>

script:

function changeCity(){
var province=document.getElementById(“selProvince”).value;
var city=document.getElementById(“selCity”);
city.options.length=0;
switch(province){
case “河南省”:
city.add(new Option(“郑州市”,”郑州市”),null);
city.add(new Option(“洛阳市”,”洛阳市”),null);
break;
case “河北省”:
city.add(new Option(“邯郸”,”邯郸市”),null);
city.add(new Option(“石家庄”,”石家庄”),null);
break;
case “山东省”:
city.add(new Option(“青岛市”,”青岛市”),null);
city.add(new Option(“烟台市”,”烟台市”),null);
break;
case “四川省”:
city.add(new Option(“成都市”,”成都市”),null);
city.add(new Option(“乐山市”,”乐山市”),null);
break;
}
}

第二种方法,更优化的写法;

<form>
<tr>
<td class=”left”>现居住地:</td>
<td> <select id=”selProvince” onchange=”changeCity( )”
style=”width:100px”>
<option>–选择省份–</option>
</select>
<select id=”selCity” style=”width:100px”>
<option>–选择城市–</option></select></td>
</tr>
</form>

script:
<script type=”text/javascript”>
var cityList=new Array();
cityList[‘北京市’]=[‘北京市’,’朝阳区’,’海淀区’];
cityList[‘四川省’]=[‘成都市’,’攀枝花’,’乐山市’];
cityList[‘广东省’]=[‘东莞市’,’广州’,’茂名市’];
function changeCity() {
var selProvince=document.getElementById(‘selProvince’).value;
var selCity=document.getElementById(‘selCity’);
selCity.options.length=0;
//遍历数组
for(var i in cityList){
if(i==selProvince){
//遍历数组中的值,添加给城市数组中
for(var j in cityList[i]){
selCity.add(new Option(cityList[i][j],cityList[i][j],null))
}

}
}

}
function allCity(){
var province=document.getElementById(‘selProvince’);
for(var i in cityList){
province.add(new Option(i,i),null);
}
}
window.onload=allCity;
</script>

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图