Question

我正在尝试根据所选状态显示城市选项，其中状态是根据所选国家/地区动态加载的（国家/地区列表是静态的）。但问题是我的动作页面从ajax接收数据没有接收任何状态值。这是我第一次尝试事件绑定，所以请帮忙。

＆＃13;

$(document).ready(function() {
  $('#country').change(function() {
    var value = $(this).val();
    $.ajax({
      url: "state_selector_db.php",
      method: "post",
      data: {
        "country": value
      },
      success: function(result) {
        var obj = jQuery.parseJSON(result)
        $('div#state').html(obj.state);
      }
    });
  });
  $('body').on("change", function() {
    var value2 = $(this).val();
    $.ajax({
      url: "state_selector_db.php",
      method: "post",
      data: {
        "state": value2
      },
      success: function(res) {
        var obj2 = jQuery.parseJSON(res)
        $('div#city').html(obj2.city);
      }
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><b>Country:&nbsp</b>
</p>
<select id="country">
  <option value="na">Select</option>
  <option value="india">India</option>
  <option value="usa">USA</option>
  <option value="england">England</option>
</select>
<div id="state"></div>
<div id="city"></div>

＆＃13;

Answer 1

你走在正确的轨道上，但你需要在事件绑定方面稍作改动

将事件绑定到在ajax使用后面填充的select元素。改变事件是选择。

$(document).ready(function () {
    $('body').on("change", "div#state select", function () {
        var value2 = $(this).val();
        $.ajax({
            url: "state_selector_db.php",
            method: "post",
            data: {
                "state": value2
            },
            success: function (res) {
                var obj2 = jQuery.parseJSON(res)
                $('div#city').html(obj2.city);
            }
        });
    });
});

Answer 2

考虑以下添加：

$('body').on("change", "#state", function () {
                       ^^^^^^^^

使用jQuery进行事件绑定

2 个答案: