设置选择选项使用jQuery

Question

我有国家，州三个选择框，市

<select name="property_country" id="country" > 
    <option value="">Country</option> 
</select> 

<select name="property_state" id="state" > 
    <option value="">State</option> 
</select> 

<select name="property_city" id="city"> 
    <option value="">City</option> 
</select> 

PHP被充国，阿贾克斯是填补国家和城市字段，没有问题存在。我在数据库中有两个国家 - 印度和美国。

如果我选择印度，ajax正确地给出状态。但是，如果我重新选择选项标签“国家”，那么州和城市字段将变为空白。如果没有选择国家（意思是“国家”），我需要jQuery代码来填写上面给出的“州”和“城市”的默认标签和值。

这可以通过填写State和City条目并将它们附加到Country然后onload（body或javascript）上载默认值来完成。但是这将使验证工作也拼凑而不是合乎逻辑的流程。因此需要jQuery解决方案。

我的jQuery代码如下：

$(document).ready(function() { 
    $('#country').on('change', function() { 
    var country_id = $('#country').val(); 
    $.ajax({ 
     type: 'POST', 
     url: '../controllers/select.php', 
     data: "country_id=" + country_id, 
     success: function(msg) { 
     $("#state").html(msg); 
     } 
    }); 
    }); 

    $('#state').on('change', function() { 
    var state_id = $('#state').val(); 
    $.ajax({ 
     type: 'POST', 
     url: '../controllers/select.php', 
     data: "state_id=" + state_id, 
     success: function(msg) { 

     $("#city").html(msg); 
     } 
    }); 
    }); 

我试图

if (country_id == "") { 
    $("#state").val("State");    
} else {  
    $.ajax({}); 
} 

Answer 1

您必须再次重新添加空白选项选择栏，如果国家值复位。

$('#country').on('change', function() { 
var country_id = $('#country').val(); 
if(country_id){ 
    $.ajax({ 
    type: 'POST', 
    url: '../controllers/select.php', 
    data: "country_id=" + country_id, 
    success: function(msg) { 
     $("#state").html(msg); 
    } 
    }); 
    } 
    else{ 
    $("#state").html(' <option value="">State</option>'); 
    $("#city").html(' <option value="">City</option>'); 
    } 
});