child select 列表中的默认值在 parent select 为空时消失

Question

我有以下 Jquery 将我的 select 列表的值附加到第二个 select 列表中。

Jquery

$('#country').change(function() {
        var getid = $(".selectlist").val();
        $('#countryid').html('');
        $.each(getid, function(index, val) {
            $('#countryid').append($(val).clone());
        });
});

我发现，如果我在 parent select（国家/地区）中取消 select 项，child（国家/地区）中的选项 'choose country code' ) select 消失。当 var getid 为空时，如何将其重新引入到我的追加中？

HTML

<!-- Parent -->
<select name="country" id="country" class="selectlist">
     <option value="22">Japan</option>
     <option value="23">United Kingdom</option>
</select>

<!-- Child -->
<select name="countryid" id="countryid">
     <option value="">Choose Country Code</option>
</select>

Answer 1

只需将其附加在 $.each():

之前

$('#country').change(function() {
        var getid = $(".selectlist").val();
        $('#countryid').html('').append($("<option/>", {text: "Choose Country Code"}));
        $.each(getid, function(index, val) {
            $('#countryid').append($(val).clone());
        });
});

如果您只在没有选择的项目时想要它：

$('#country').change(function() {
        var getid = $(".selectlist").val();
        $('#countryid').html('');
        $.each(getid, function(index, val) {
            $('#countryid').append($(val).clone());
        });
        if (!getid)
          $("#countryid").append($("<option/>", {text: "Choose Country Code"}));
});

child select 列表中的默认值在 parent select 为空时消失

Default value in child select list disappears when parent select is empty

javascript

jquery