薛乎乎~ 2024-04-26 17:48 采纳率: 87.5%
浏览 2
已结题

(标签-Jquery)

利用Jquery修改下列代码


```html
<html>
<head>
    <title>省市二级联动菜单</title>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script  type="text/javaScript">

        //创建数组
        var  addrs=new Array(3);
        //数组包含了全部,
        addrs[0]=new Array("吉林","长春","吉林","四平","松原");
        addrs[1]=new Array("黑龙江","哈尔滨","北安","大庆","大兴安岭",);
        
        addrs[2]=new Array("辽宁","沈阳","鞍山","本溪","朝阳","大连");


        //页面加载时调用
        function  init(){
            //循环添加省的信息
            for (var i=0;i<addrs.length;i++){
                var  text=document.createTextNode(addrs[i][0]);
                var opt=document.createElement("option");
                opt.appendChild(text);
                document.getElementById("pro").appendChild(opt);
            }

            //获取省的下拉框
            var select = document.getElementById("pro");
            //循环查询"吉林省",并选中
            for(var i=0; i<select.options.length; i++){
                if(select.options[i].innerHTML == "吉林省"){
                    select.options[i].selected = true;
                    break;
                }
            }

            //获取省的下拉框值
            var  pro=document.getElementById("pro").value;
            //创建市的下拉框
            document.getElementById("city").innerHTML="";
            //循环创建省为选中的省所包含的市的下拉框
            for (var i=0;i<addrs.length;i++){
                //如果省为选中的值,则循环创建市的option
                if(addrs[i][0]==pro){
                    for(var  j=1;j<addrs[i].length;j++){
                        var  text=document.createTextNode(addrs[i][j]);
                        var opt=document.createElement("option");
                        opt.appendChild(text);
                        document.getElementById("city").appendChild(opt);
                    }
                }
            }
        }

        //获取城市
        function  getCities(){
            //获取省的值
            var  pro=document.getElementById("pro").value;
            //循环创建市的下拉框
            document.getElementById("city").innerHTML="";
            for (var i=0;i<addrs.length;i++){
                if(addrs[i][0]==pro){
                    for(var  j=1;j<addrs[i].length;j++){
                        var  text=document.createTextNode(addrs[i][j]);
                        var opt=document.createElement("option");
                        opt.appendChild(text);
                        document.getElementById("city").appendChild(opt);
                    }
                }
            }
        }
    </script>
</head>
<body   onload="init()" >
<select  id="pro"  onchange="getCities()"><option>-请选择省-</option></select>
<select  id="city">
    <option>-请选择市-</option>
</select>
</body>
</html>



```

  • 写回答

3条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-04-26 17:48
    关注

    引自免费微信小程序:皆我百晓生

    在您提供的HTML和JavaScript代码中,已经实现了一个简单的省市二级联动菜单。但是,为了更好地与jQuery结合,并优化这段代码,我们可以进行一些改进。首先,我们需要移除内联JavaScript事件处理程序(onload和onchange),并将它们替换为jQuery的事件绑定方法。接下来,我们将使用jQuery来操作DOM元素,使其更简洁。

    以下是使用jQuery重构后的代码:

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>省市二级联动菜单</title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script>
            $(document).ready(function () {
                // 创建数组
                var addrs = [
                    ["吉林", "长春", "吉林", "四平", "松原"],
                    ["黑龙江", "哈尔滨", "北安", "大庆", "大兴安岭"],
                    ["辽宁", "沈阳", "鞍山", "本溪", "朝阳", "大连"]
                ];
    
                // 初始化函数
                function initProvinces() {
                    // 循环添加省的信息
                    $.each(addrs, function (_, province) {
                        $("<option>").val(province[0]).text(province[0]).appendTo("#pro");
                    });
    
                    // 设置默认选中项为"吉林省"
                    $("#pro option:contains('吉林省')").prop("selected", true);
    
                    // 获取省的值并初始化城市选项
                    initCities();
                }
    
                // 初始化城市
                function initCities() {
                    var province = $("#pro").val();
    
                    // 清空城市选项
                    $("#city").empty();
    
                    // 如果有匹配的省份,填充城市选项
                    if (province) {
                        $.each(addrs, function (_, arr) {
                            if (arr[0] === province) {
                                $.each(arr.slice(1), function (_, city) {
                                    $("<option>").val(city).text(city).appendTo("#city");
                                });
                                return false; // 停止遍历数组
                            }
                        });
                    } else {
                        $("<option>").val("").text("-请选择市-").appendTo("#city");
                    }
                }
    
                // 获取城市
                function getCities() {
                    initCities();
                }
    
                // 页面加载完成后执行初始化
                initProvinces();
            });
        </script>
    </head>
    <body>
        <select id="pro" onchange="getCities()"><option value="">-请选择省-</option></select>
        <select id="city"><option value="">-请选择市-</option></select>
    </body>
    </html>
    

    这段代码做了以下改进:

    1. 引入了外部的jQuery库。
    2. onloadonchange属性替换为jQuery的$(document).ready和事件监听器。
    3. 使用jQuery的$.each()方法遍历数组,替代了原始的for循环。
    4. 使用jQuery的方法操作DOM元素,如$("<option>"), .val(), .text(), .appendTo(), 和.prop()
    5. 更改了默认选择的逻辑,以便当没有选择省时,城市下拉列表会显示"-请选择市-"。

    这个版本的代码更加简洁、易读,并充分利用了jQuery的功能。现在,它应该能更好地满足您的需求。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 9月13日
  • 已采纳回答 9月5日
  • 创建了问题 4月26日

悬赏问题

  • ¥15 mySQL5.7.34安装遇到的问题
  • ¥15 结构功能耦合指标计算
  • ¥20 visual studio中c语言用ODBC链接SQL SERVER
  • ¥50 AI大模型精调(百度千帆、飞浆)
  • ¥15 非科班怎么跑代码?如何导数据和调参
  • ¥15 福州市的全人群死因监测点死亡原因报表
  • ¥15 Altair EDEM中生成一个颗粒,并且各个方向没有初始速度
  • ¥15 系统2008r2 装机配置推荐一下
  • ¥15 悬赏Python-playwright部署在centos7上
  • ¥15 psoc creator软件有没有人能远程安装啊