实现两个select之间的两极联动

最新推荐文章于 2023-10-12 11:15:52 发布

dnbug Blog

最新推荐文章于 2023-10-12 11:15:52 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： # [Web前端基础_HTML] [Web前端基础HTML_JS_CSS] 文章标签： select联动 select option js html 联动

本文链接：https://blog.youkuaiyun.com/u014132947/article/details/80104461

[Web前端基础HTML_JS_CSS] 同时被 2 个专栏收录

24 篇文章

订阅专栏

[Web前端基础_HTML]

13 篇文章

订阅专栏

本文介绍了一种联动省市选择器的实现方式，包括一次性加载所有数据并在客户端进行处理的方法，以及通过AJAX按需获取数据的方式。提供了具体的JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(i厂房网 http://www.icf8.com/cutcity.jsp)

联动想到的有两种做法：
1.一次拉取全部省市数据,在本地(JS中)对省市分组,这时候再点击省选项select1的时候直接筛选市数据放置select2中;
2.ajax根据省code请求数据,当点击省选项select1的时候,请求数据,将返回的市数据放置到select2中;

贴几行JS CODE
$("#select_open_province").on('change', function () {
        var selectId = $('#select_open_province option:selected');
        var select_province_code = selectId.data('province_code');
        var html = "";
        for (var i = 0; i < Object.keys(opencity).length; i++) {
            if (select_province_code == opencity[i]['province_code']) {
                html += "<option data-domain='" + opencity[i]['domain'] + "'value='" + opencity[i]['city_code'] + "'>" + opencity[i]['city_name'] + "</option>";
            }
        }
        $('#select_open_city').html(html);
        $('#select_open_city')[0].selectedIndex = -1;
        $("#select_open_city").removeAttr("disabled");
    });

    $("#select_open_city").on('change', function () {
        var selectId = $('#select_open_city option:selected');
        var domain = selectId.data('domain');
        window.location.href = "http://" + domain + "{$bdomain}";
    });