js&jquery的省市联动问题

js版本

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>js版本的省市联动</title>
        <script>
        window.onload=function(){
                var city=document.getElementById("city");
                city.onchange=function(){
                    var options=document.getElementsByTagName("option");
                    for(var i=0;i<options.length;i++){
                        if(options[i].selected){
                            var val=options[i].value;
                            switch(val){
                                case "gz":
                                    var area=document.getElementById("area");
                                    area.innerHTML="<option>深圳市</option>"+
                                                    "<option>东菀市</option>"+
                                                    "<option>惠州市</option>"+
                                                    "<option>广州市</option>";
                                    break;
                                case "hn":
                                    var area=document.getElementById("area");
                                    area.innerHTML="<option>长沙市</option>"+
                                                    "<option>岳阳市</option>"+
                                                    "<option>株洲市</option>"+
                                                    "<option>湘潭市</option>";
                                    break;
                                case "fj":
                                    var area=document.getElementById("area");
                                    area.innerHTML="<option>厦门市</option>"+
                                                    "<option>福州市</option>"+
                                                    "<option>漳州市</option>"+
                                                    "<option>泉州市</option>";
                                    break;
                            }
                        }
                    }
                };
        };
        </script>
    </head>
    <body>
        <select id="city">
            <option value="gz">广东省</option>
            <option value="hn">湖南省</option>
            <option value="fj">福建省</option>
        </select>
        
        <select id="area">
            <option>深圳市</option>
            <option>东菀市</option>
            <option>惠州市</option>
            <option>广州市</option>
        </select>
    </body>
</html>

 

 

jquery版本

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jquery-省市联动</title>
        <script src="../../js/jquery-1.4.2.js"></script>
        <script src="../../js/jquery-1.8.3.js"></script>
        <script>
            $(document).ready(function(){
                var $city=$("#city");
                //监听改变事件
                $city.change(function(){
                    var $val=$("#city option:selected").val();
                    switch($val)
                    {
                        case "gz":
                            $("#area").html("<option>深圳市</option>"+
                                                    "<option>东菀市</option>"+
                                                    "<option>惠州市</option>"+
                                                    "<option>广州市</option>");
                        break;
                        
                        case "hn":
                            $("#area").html("<option>长沙市</option>"+
                                                    "<option>岳阳市</option>"+
                                                    "<option>株洲市</option>"+
                                                    "<option>湘潭市</option>");
                        break;
                        
                        case "fj":
                            $("#area").html("<option>厦门市</option>"+
                                                    "<option>福州市</option>"+
                                                    "<option>漳州市</option>"+
                                                    "<option>泉州市</option>");
                        break;
                    }
                });
            });
        </script>
    </head>
    <body>
        <select id="city">
            <option value="gz">广东省</option>
            <option value="hn">湖南省</option>
            <option value="fj">福建省</option>
        </select>
        
        <select id="area">
            <option>深圳市</option>
            <option>东菀市</option>
            <option>惠州市</option>
            <option>广州市</option>
        </select>
    </body>
</html>

 

posted @ 2019-07-22 15:57  薄眠抛却陈年事。  阅读(332)  评论(0)  编辑  收藏  举报