Блог

Главная - Вопросы по программированию - jQuery .change не работает при попытке заполнить 2 элемента select

jQuery .change не работает при попытке заполнить 2 элемента select

#javascript #jquery #ajax

#javascript #jquery #ajax

Вопрос:

Итак, я пытаюсь заполнить 2 выпадающих списка HTML, используя PHP, MySQL и jQuery. Параметры второго элемента (area) будут зависеть от выбора в первом выпадающем списке (city). Я скопировал код из другого моего рабочего проекта, но я не могу заставить его работать в этом проекте.

Вот мой код 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>");
    }
  });
});

get.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 загружается просто отлично. Хотя, когда я выбираю значение в раскрывающемся списке city, ничего не происходит. Это не вызывает get.php файл вообще. Я искал везде в течение нескольких часов, и, похоже, нигде не могу найти решение, и я не знаю, что я делаю не так.

Заранее большое спасибо за вашу помощь.

Комментарии:

1. Вы пробовали устанавливать Fiddler и видеть, какой ответ (если таковой имеется) вы получаете от вашего Ajax-вызова? telerik.com/fiddler

2. Установите точку останова в .change() функции и выполните один шаг по ней, чтобы увидеть, что происходит при выборе из первого меню.

3. Также не помешало бы определить error обработчик в вашем объекте настроек AJAX. Может помочь что-то настолько простое, насколько это возможно error: function ( jqXHR, status, error ) { console.log( 'Error!', error ) } .

4. @trfletch к сожалению, в Fiddler вообще ничего не изменилось, когда я выбрал опцию в первом выпадающем списке. Также я только что понял, что консоль выводит «Uncaught TypeError: $ не является функцией» в первой строке ajax.js

5. Вы ссылаетесь на скрипт Jquery на своей странице?

Ответ №1:

Я, наконец, исправил это, добавив следующую строку в первую строку моего ajax.js файл:

 var $jq = jQuery.noConflict();

А затем изменил каждый $ на $jq в том же ajax.js файл. Я надеюсь, что это поможет и другим людям