當父選擇爲空時，子選擇列表中的默認值消失

Question

我有以下將我的選擇列表的值附加到第二個選擇列表中的jquery。

jQuery的

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

我發現，如果我在取消我的父母選擇的項目（國家），選擇「選擇國家代碼」的孩子（countryid）選擇消失。當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"})); 
});