使用Jquery设置选择选项

时间:2016-09-07 12:39:39

标签: jquery select dropdown

我有三个国家,州,城市的选择框

<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正在填补州和城市领域,那里没有问题。我在数据库中有两个国家 - 印度和美国。

如果我选择印度,ajax会正确地给出状态。但是,如果我重新选择选项标签“Country”,则州和城市字段将变为空白。如果没有选择国家/地区(意思是“国家/地区”),我需要jQuery代码来填充“State”和“City”上面给出的默认标签和值。

这可以通过填写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({});
}

1 个答案:

答案 0 :(得分:2)

如果重置国家/地区值,则必须再次将空白选项添加到选择字段。

$('#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>'); 
  }
});