javascript - 使用数组填充选择下拉列表

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));
    });
}

或者，不是在循环中追加，而是使用 map 设置 html():

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