javascript - 当从 php 设置值“选择值”时，ajax 'change' 不会被触发

Question

我有一张包含城市、州和国家的表格。 选择城市后 - 我通过 ajax 从 mysql 数据库自动填充州和国家/地区。

但是，当我尝试从数据库中选择表单时，ajax 更改不会被触发。

请问我做错了什么？我如何从数据库读取以选择并仍然自动填充依赖字段？

这是我的代码

< script type = "text/javascript" >
  function profileLocationFunction() {
    $('#profilecity').change(function() {
      var id = $(this).val();
      var dataString = id;

      $.ajax({
        type: "GET",
        url: "locationautocomplete.php",
        dataType: 'json',
        data: {
          datatext: dataString,
          type: 'cityselect'
        },
        cache: false,
        success: function(data) {
          $('#profilestate').html(data.message1);
          $('#profilecountry').html(data.message2);
        },
        error: function(xhr, status, error) {
          alert("Hello! ERROR!" + error);
        }
      });

    });
  }

$(document).ready(function() {
  profileLocationFunction();
}); < /script>

<?PHP require_once("include/DbConfig.php");
 if($_GET['type']=='cityselect') {
  $stateid="";
  $statedata="";
  $countryid="";
  $countrydata="";
  //fetch state from city
  $id=$_GET['datatext'];
  $city_query="SELECT DISTINCT CITY.STT_ID, STATE.STT_ID, STATE.STT_NAME FROM CITY, STATE WHERE CITY.CTY_ID='".$id."' AND CITY.STT_ID = STATE.STT_ID";
  $result=mysqli_query($DB_con, $city_query);
  while ($row=mysqli_fetch_assoc($result)) {
    $stateid=$row['STT_ID'];
    $statedata=$row['STT_NAME'];
  }
  //fetch country
  $country_query="SELECT DISTINCT STATE.CTR_ID, COUNTRY.CTR_ID, COUNTRY.CTR_NAME FROM STATE, COUNTRY WHERE STATE.STT_ID='".$stateid."' AND STATE.CTR_ID = COUNTRY.CTR_ID";
  $countryresult=mysqli_query($DB_con,
  $country_query);
  while ($row=mysqli_fetch_assoc($countryresult)) {
    $countryid=$row['CTR_ID'];
    $countrydata=$row['CTR_NAME'];
  }
  //send result
  echo json_encode(array("message1"=>'<option value="'.$stateid.'">'.$statedata.'</option>',
  "message2"=>'<option value="'.$countryid.'">'.$countrydata.'</option>'));
}
?>

<div class="form-group">
  <label for="city" class="col-sm-3 control-label">City*</label>
  <div class="col-sm-7">
    <input type="hidden" name="profileselectedcityid" id="profileselectedcityid" value='' />
    <select type="text" class="form-control" name="profilecity" id="profilecity" placeholder="City">
      <option selected="selected">--Select City--</option>
      <?php if(!$site->FetchAllCities()) { echo '
      <script type="text/javascript">
        alert("ERROR");
      </script>'; } ?>
    </select>
  </div>
</div>

<div class="form-group">
  <label for="state" class="col-sm-3 control-label">State*</label>
  <div class="col-sm-7">
    <input type="hidden" name="profileselectedstateid" id="profileselectedstateid" value='' />
    <select type="text" class="form-control" name="profilestate" id="profilestate" placeholder="City">
      <option selected="selected">--Select State--</option>
    </select>
  </div>
</div>

<div class="form-group">
  <label for="country" class="col-sm-3 control-label">Country*</label>
  <div class="col-sm-7">
    <input type="hidden" name="profileselectedcountryid" id="profileselectedcountryid" value='' />
    <select type="text" class="form-control" name="profilecountry" id="profilecountry" placeholder="City">
      <option selected="selected">--Select Country--</option>
    </select>
  </div>
</div>

Answer 1

尝试将您的 JavaScript 代码替换为:

 function profileLocationFunction() {
      var id = $(this).val();
      var dataString = id;
      $.ajax({
        type: "GET",
        url: "locationautocomplete.php",
        dataType: 'json',
        data: {
          datatext: dataString,
          type: 'cityselect'
        },
        cache: false,
        success: function(data) {
          $('#profilestate').html(data.message1);
          $('#profilecountry').html(data.message2);
        },
        error: function(xhr, status, error) {
          alert("Hello! ERROR!" + error);
        }
      });

    }


$(document).ready(function() {
       $('#profilecity').change(profileLocationFunction).change();

});

我只是从函数中删除该事件，也许这样更好。