javascript实现下拉选框联动

    <select id="province" onchange="selectCity(this)">
            <option>--选择省市--</option>
            <option>北京市</option>
            <option>河北省</option>
            <option>辽宁省</option>
            <option>山东省</option>
        </select>

onchange事件是在表单项的value值发生变化后触发执行，作用在input、select、textarea元素上
例:下拉选框值改变的时候触发onchange事件
表单的name和value在提交时会传给服务器
select元素以name为key，option的value值或option的内容提交

var data = {
"北京市": ["海淀区","朝阳区","丰台区"],
"河北省": ["石家庄","唐山","秦皇岛"],
"辽宁省": ["沈阳","大连","鞍山"],
"山东省": ["青岛","济南","烟台"]
}
var p3={
"name":"张飞",
"age":18
}
alert(p3.name);
alert(data.河北省);
alert(data["河北省"]);

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二级联动下拉框</title>
<!--
data:
    "北京市": ["海淀区","朝阳区","丰台区"]
    "河北省": ["石家庄","唐山","秦皇岛"]
    "辽宁省": ["沈阳","大连","鞍山"]
    "山东省": ["青岛","济南","烟台"]
-->
<!--引入jquery的js库-->
<script>

    /* --通过js实现二级联动下拉框-- */
    function getCountry(){
        //1.获取select元素
        var sele=document.getElementsByName("country")[0];
        //2.获取select元素的value值
        document.getElementById("result").innerHTML=sele.value;
        var img=document.getElementsByTagName("img")[0];
        if(sele.value=="日本"){
            img.src="img/jp.jpg";
        }
        else if(sele.value=="中国"){
            img.src="img/ch.jpg";
        }
        else if(sele.value=="美国"){
            img.src="img/am.jpg";
        }
        else{
            img.src="";
        }
    }

    var data = {
        "北京市": ["海淀区","朝阳区","丰台区"],
        "河北省": ["石家庄","唐山","秦皇岛"],
        "辽宁省": ["沈阳","大连","鞍山"],
        "山东省": ["青岛","济南","烟台"]
    }


    function selectCity(thisobj){
        //1.先获取用户选中的省份
         var prov=thisobj.value;
        //2.根据省份获取省份对应的城市数据
        var citys=data[prov];
        //3.遍历数组中的城市，将城市变为option选项
        var citySele=document.getElementById("city");
        //在添加当前省份对应的城市到select框之前应该先清空其他成分的选项，再进行添加
        citySele.innerHTML="<option>--选择城市--</option>";
        for(var i=0;i<citys.length;i++){
            var opt=document.createElement("option");
            opt.innerHTML=citys[i];
            //添加到第二个城市的下拉选框中
            citySele.appendChild(opt);
        }

    }
    
</script>
<!-- 
    1.让用户先选择一个省份, 获取用户选中的省份 北京市

    2.根据用户选中的省份, 获知省份下面的所有城市(数组)

    3.将该省份下面的所有城市 作为option选项 填充到第二个select列表(城市)中
 -->
<!-- 
js实现注意问题: 
    ie10以下的浏览器不支持 select,table上的innerHTML属性
    删除option时，由于删除后，options长度发生了变化，所以直接用for循环会有漏删的情况，可以由后向前删除，可以避免这样的问题
-->
</head>

<body>
    
    <select name="country" onchange="getCountry()"  >
        <option value="none">--选择国家--</option>
        <option value="中国">中国</option>
        <option value="美国">美国</option>
        <option value="日本">日本</option>
    </select>
    <br><br>
    <hr/>




    
    <br>
    <div id="seleDiv">
        
        <select id="province" onchange="selectCity(this)">
            <option>--选择省市--</option>
            <option>北京市</option>
            <option>河北省</option>
            <option>辽宁省</option>
            <option>山东省</option>
        </select>
        
        <select id="city">
            <option>--选择城市--</option>
        </select>
    </div>
    <br/>
    <h2>选择的国家是</h2>
    <div id="result" style="color:red;"></div>
    <img src="" alt="还未选择国家" style="width:250px;height: 250px;">
</body>

</html>

javascript实现下拉选框联动

推荐阅读更多精彩内容