薛乎乎~ 2024-04-26 18:02 采纳率: 87.5%
浏览 0
已结题

(标签-jquery)

利用jquery修改下列代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    选择城市:
    <select name="" id="shengs">
        <option value="请选择省份">请选择省份</option>
    </select>
    <select name="" id="shi">
        <option value="请选择城市">请选择城市</option>
    </select>
</body>
<style>

</style>
<script>
    var sheng = new Array();
    sheng["辽宁省"] = ["沈阳市", "大连市", "鞍山市", "抚顺市", "本溪市", "丹东市"];
    sheng["吉林省"] = ["长春市", "吉林市", "四平市", "辽源市", "通化市", "白山市"];
    sheng["黑龙江省"] = ["哈尔滨市", "牡丹江市", "齐齐哈尔市", "大庆市", "鸡西市", "佳木斯"];

    var oSheng = document.getElementById("shengs");
    var oCity = document.getElementById("shi");
    for (var i in sheng) {
        oSheng.add(new Option(i, i), null)
    }

    oSheng.onchange = function () {
        oCity.length = 0;
        var oSelect = oSheng.value;
        for (var j in sheng[oSelect]) {
            oCity.add(new Option(sheng[oSelect][j], sheng[oSelect][j]), null)
        }
    }

</script>

</html>

  • 写回答

4条回答 默认 最新

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

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

    为了让你更好地理解代码的改动,我会逐步解释并提供修改后的代码。

    首先,我们需要在HTML部分添加一个class属性,以便于jQuery的选择器可以更方便地定位元素。这里我们给两个<select>元素分别添加类名province-selectcity-select

    <select class="province-select" name="" id="shengs">
    ...
    <select class="city-select" name="" id="shi">
    

    接下来,我们将使用jQuery替换原生JavaScript代码。确保页面引入了jQuery库(通常放在<head>部分):

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    

    然后,在<script>标签内,我们可以将原生JavaScript代码转换为jQuery版本:

    $(document).ready(function () {
        var sheng = new Array();
        sheng["辽宁省"] = ["沈阳市", "大连市", "鞍山市", "抚顺市", "本溪市", "丹东市"];
        sheng["吉林省"] = ["长春市", "吉林市", "四平市", "辽源市", "通化市", "白山市"];
        sheng["黑龙江省"] = ["哈尔滨市", "牡丹江市", "齐齐哈尔市", "大庆市", "鸡西市", "佳木斯"];
    
        // 初始化城市选项
        $.each(sheng, function(provinceName, cities) {
            $('.province-select').append($('<option>', {value: provinceName, text: provinceName}));
        });
    
        // 监听省份选择改变事件
        $('.province-select').on('change', function () {
            var selectedProvince = $(this).val();
            $('.city-select').empty();
    
            if(selectedProvince) {
                var cityOptions = '';
                $.each(sheng[selectedProvince], function(cityIndex, cityName) {
                    cityOptions += '<option value="' + cityName + '">' + cityName + '</option>';
                });
                $('.city-select').append(cityOptions);
            } else {
                $('.city-select').append('<option value="">请选择城市</option>');
            }
        });
    });
    

    这段代码做了以下更改:

    1. 使用$(document).ready()函数确保文档加载完成后执行后续脚本。
    2. 使用jQuery的.each()方法遍历省份数组,初始化省份选项。
    3. 替换原生的事件监听方法,使用jQuery的.on()方法绑定change事件到省份选择框。
    4. 在事件处理程序中,通过.val()获取选中的省份,并根据选择更新城市选项。
    5. 使用字符串模板或.append()方法动态创建并添加城市选项。

    这样,你就得到了一个基于jQuery的可工作的多级联动选择框。当用户选择省份时,相应的城市选项会自动填充到城市选择框中。

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

报告相同问题?

问题事件

  • 系统已结题 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软件有没有人能远程安装啊