省市联动实现：jQuery和纯HTML两种方法

最新推荐文章于 2022-11-14 17:43:12 发布

傻傻的鱼

最新推荐文章于 2022-11-14 17:43:12 发布

阅读量2.7k

点赞数 2

分类专栏：前端面试 jQuery HTML 文章标签： jquery html

本文链接：https://blog.csdn.net/qq_22944825/article/details/73162759

版权

前端面试同时被 3 个专栏收录

21 篇文章 11 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

1.利用jQuery 来实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
        <script>
            $(function(){
                $("#province").change(function(){
                    $("#city").empty();
                    console.log($("#province").val());
                    if($("#province").val()=="1")
                    {
                        var txt1=" <option value='024'>沈阳市</option>"; 
                        var txt2=" <option >大连市</option>";  
                        var txt3=" <option >北京市</option>";

                        $("#city").append(txt1,txt2,txt3);   
                    }
                    else if($("#province").val()=="2")
                    {
                        var txt1=" <option >济南市</option>"; 
                        var txt2=" <option >济宁市</option>";  
                        var txt3=" <option >天津市</option>";

                        $("#city").append(txt1,txt2,txt3);   
                    }
                    else if($("#province").val()=="3")
                    {
                        var txt1=" <option >火星</option>"; 
                        var txt2=" <option >彗星星</option>";  
                        var txt3=" <option >M78星云</option>";

                        $("#city").append(txt1,txt2,txt3);   
                    }else
                    {
                        $("#city").append("<option>请选择</option>");   
                    }
                });
            });
        </script>
    </head>
    <body>
        <select id="province" >
             <option id="">---</option>
             <option value="1">辽宁省</option>
             <option value="2">山东省</option>
             <option value="3">外星</option>
        </select>
        <select id="city">
            <option id="">请选择</option>
        </select>
    </body>
</html>

2.不使用jQuery

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function changeCity(provinceCtrl)
            {
            //  1.选择的省
            //  2.删除市中的所有选项
            //  3.根据省向 市的下拉框中添加option元素
                var province = provinceCtrl.value;
                var cityCtrl = document.getElementById("city");
                cityCtrl.options.length=0;
                if(province == "1")
                {

                    //var option =new Option("济南市","024");
                    var option =document.createElement("option");
                    option.value="024";
                    option.innerHTML="沈陽";
                    //把option 挂在 city 下面
                    cityCtrl.appendChild(option);
                    var option =new Option("北京市","024");
                    //把option 挂在 city 下面
                    cityCtrl.appendChild(option);
                    var option =new Option("大连市","024");
                    //把option 挂在 city 下面
                    cityCtrl.appendChild(option);
                    var option =new Option("沈阳市","024");
                    //把option 挂在 city 下面
                    cityCtrl.appendChild(option);
                }
                else if(province == "2")
                {

                    var option =new Option("吉林市","024");
                    //把option 挂在 city 下面
                    cityCtrl.appendChild(option);
                    var option =new Option("长春市","024");
                    //把option 挂在 city 下面
                    cityCtrl.appendChild(option);

                }
                else{
                    var option =new Option("请选择","024");
                    //把option 挂在 city 下面
                    cityCtrl.appendChild(option);
                }

            }
        </script>
    </head>
    <body>
        <select onchange="changeCity(this)">
             <option id="">---</option>
             <option value="1">辽宁省</option>
             <option value="2">吉林省</option>

        </select>
        <select id="city">
            <option id="">请选择</option>
        </select>
    </body>
</html>

傻傻的鱼

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
省市联动实现：jQuery和纯HTML两种方法

1.利用jQuery 来实现<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
复制链接

扫一扫