时间戳

首页 > 解决方案 > 尝试填充 2 个选择元素时，jQuery .change 不起作用

javascript - 尝试填充 2 个选择元素时，jQuery .change 不起作用

问题描述

所以我正在尝试使用 PHP、MySQL 和 jQuery 填充 2 个 HTML 下拉列表。第二个（区域）的选项将取决于第一个下拉列表（城市）中的选择。我从我的另一个工作项目中复制了代码，但我无法让它在这个项目中工作。

这是我的 JavaScript 代码（ajax.js）：

$(document).ready(function() {
  $("#city").change(function() {
    var cityid = $(this).val();
    if(cityid != "") {
      $.ajax({
        type: 'POST',
        url: 'assets/inc/get.php',
        data: {cityid:cityid},
        success: function(response) {
          var resp = $.trim(response);
          $("#area").html(resp);
        }
      });
    } else {
      $("#area").html("<option selected disabled>Bir şehir seçiniz</option>");
    }
  });
});

获取.php 文件：

<?php
include('dbconfig.php');
if(isset($_POST['cityid'])){
  $cityid = mysqli_real_escape_string($conn, $_POST['cityid']);
  $query = 'SELECT * FROM `areas` WHERE `city`='.$cityid.' and `active`=1';
  $result = mysqli_query($conn,$query) or die(mysql_error());

  if(mysqli_num_rows($result) > 0) {
    echo '<option selected disabled>Bölge seçiniz</option>';
    while($row = mysqli_fetch_object($result)) {
      echo '<option value="'.$row->id.'">'.$row->name.'</option>';
    }
  }
  else {
      echo '<option selected disabled>asdBir şehir seçiniz</option>';
  }

}
?>

和 HTML：

<div class="row form-group">
  <div class="col-md-6">
    <label for="city" class=" form-control-label">Şehir</label>
    <select id="city" name="city" class="form-control">
      <option selected disabled>Şehir Seçin</option>
      <?php
        $qry = 'select * from `cities` where `active`=1';
        $res = mysqli_query($conn, $qry);
        if(mysqli_num_rows($res) > 0) {
          while($row = mysqli_fetch_object($res)) {
            echo '<option value="'.$row->id.'"';
            if($_GET['d3'] == $row->id){echo ' selected';}
            echo '>'.$row->name.'</option>';
          }
        }
      ?>
    </select>
  </div>
  <div class="col-md-6">
    <label for="area" class=" form-control-label">Bölge</label>
    <select id="area" name="area" class="form-control">
    </select>
  </div>
</div>

我检查了开发工具中的网络部分，并且 ajax.js 加载得很好。虽然当我在城市下拉列表中选择一个值时，没有任何反应。它根本不调用 get.php 文件。我已经到处搜索了几个小时，我似乎无法在任何地方找到解决方案，我不知道我做错了什么。

非常感谢您的帮助。

标签： javascriptjqueryajax

解决方案

我终于通过将以下行添加到我的 ajax.js 文件的第一行来修复它：

var $jq = jQuery.noConflict();

$然后在同$jq一个 ajax.js 文件中更改每一个。我希望这对其他人也有帮助

推荐阅读