使用数组

Question

嗨我得到了这段代码，我试图根据用户选择的内容进行填充..它做了我想要的但它在选择选项中创建了重复项，我不希望每次用户从中选择下拉列表。

看看感谢... https://jsfiddle.net/ncfqLkn5/

var state_province_canada = ['Please select your province', 'AL', 'British Columbia', 'Ontario', 'Quebec'];
var city_canada = [];
    city_canada[0] = ['Please select your city', 'Edmonton T5A 4L8'];
    city_canada[1] = ['Please select your city', 'Coquitlam V3K 3V9', 'Vancouver V6Z1Y6'];
    city_canada[2] = ['Please select your city', 'Brampton L6Z 4N5', 'Sarnia N7T 4X3', 'Strathroy N7G 1Y7', 'Newmarket L3Y 5G8', 'Collingswood L9Y 1W3', 'Corunna N0N 1G0', 'Sarnia N7T 4X3'];
    city_canada[3] = ['Please select your city', 'Sherbrooke J1J 2E4', 'Quebec G1V 4M6', 'St. Charles Borromee J6E 6J2', 'Quebec G1V 4G5', 'Montreal H3H 1A1'];    


$(document).ready(function(){
    $("select").change(function(){
        $( "select option:selected").each(function(){
            if($(this).attr("value")=="canada"){
                $.each(state_province_canada, function(val, text) {
                  $('#state_province').append( $('<option></option>').val(val).html(text) );
                });
                $(".province").hide();
                $("#state_province").show();
            }

            if($(this).text() == "AL") {
              $.each(city_canada[0], function(val, text) {
                  $('#city').append( $('<option></option>').val(val).html(text) );
                });
                $("#city").show();
            }
        });
    }).change();
});

Answer 1

您.append()已经拥有选项的select元素的选项。最简单的选择是在循环浏览附加内容之前.empty()选择。

if($(this).val()=="canada") {
    $('#state_province').empty();
    $.each(state_province_canada, function(val, text) {
        $('#state_province').append($('<option>').val(val).html(text));
    });
}

或者不是在循环中追加，而是将html()设为map：

if($(this).val()=="canada") {
    $('#state_province').html($.map(state_province_canada, function(text, val) {
        return $('<option>').val(val).html(text);
    }));
}