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


    实现两个select之间的两极联动_第1张图片


实现两个select之间的两极联动_第2张图片

(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 += "";
            }
        }
        $('#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}";
    });


你可能感兴趣的:(【WEB前端基础-Js】,【WEB前端基础-Html】)