使用 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 填充的是 country，Ajax 填充的是 State 和 City 字段，没有问题。我在数据库中有两个国家 - 印度和美国。

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

这可以通过数据库完成，方法是填写州和城市条目并将它们附加到国家，然后 onload（正文或 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>'); 
  }
});