AJAX DropDown не заполняется

Question

Я использую JQuery и PHP. Таким образом, при выборе первого раскрывающегося списка значение первого раскрывающегося списка должно быть передано в запрос Mysql, а затем заполнить второе раскрывающееся меню, но второе выпадающее меню отображается пустым.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script> 
    $(document).ready(function() { 
     $("#city").change(function() { 
      var value = $(this).val(); 
      $.ajax({ 
       type : "GET", 
       url : 'abc.php', 
       data : { 
        choice : value 
       }, 
       success : function(data){ 
        $('#123').html(data); 
       } 
      }) 
     }); 
    }); 
</script> 

<form action="" method="post"> 
    <select class="form-control" id="city" action="" name="city" value=""> 
     <option value="">--</option> 
     <option value="1"</option> 
     <option value="2"</option> 
     <option value="3"</option> 
    </select> 
    <br/> 
</div> 
<div class="form-group">   
    <select class="form-control" action="" name="123" id="123""> 
     <option value="--">--</option> 
     <?php 
     $query = "SELECT DISTINCT `Comm` FROM `Comm_New` WHERE `Market`='".$_GET['city']."' ORDER BY `Comm` ASC"; 
     if ($result = mysqli_query($link, $query)) { 
      while ($Comm = mysqli_fetch_assoc($result)) { 
       print_r("<option value='".$Comm['Comm']."'>".$Comm['Comm']."</option>"); 
      } 
     }   
     ?> 
    </select><br/> 
</div> 

Answer 1

Из нашей беседы в комментариях вы вызываете ту же страницу, которую вы первоначально загружаете. Это не обязательно проблема технически, она просто не реализована должным образом. Чтобы загрузить ту же страницу, что вам нужно сделать:

<?php 
// Make sure your database is initiated above here so this can use it. 
// I am going to demonstrate a basic binding using a super basic PDO 
// connection because procedural mysqli_* with bind is just annoying 
$link = new PDO('mysql:host=localhost;dbname=test', $user, $pass); 
// Notice that you send "choice" as the GET key in your ajax, not "city" 
if(!empty($_GET['choice'])) { 
?> 
    <select class="form-control" action="" name="123" id="123""> 
     <option value="">--</option> 
     <?php 
     // prepare, bind, execute here 
     $query = $link->prepare("SELECT DISTINCT `Comm` FROM `Comm_New` WHERE `Market` = :0 ORDER BY `Comm` ASC"); 
     $query->execute(array(':0'=>$_GET['choice'])); 
     // PDO has a lot of connection settings where you can set the default 
     // return type so you don't need to tell it to fetch assoc here. 
     // Also, you would tell the the connection not to just emulate bind 
     // etc.. I would consider using PDO or the OOP version of mysqli 
     while ($Comm = $query->fetch(PDO::FETCH_ASSOC)) { 
      echo "<option value='".$Comm['Comm']."'>".$Comm['Comm']."</option>"; 
     } 

?> </select> 
<?php 
     // Stop the page from running further 
     die(); 
    } 
?><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script> 
    $(document).ready(function() { 
     $("#city").change(function() { 
      var value = $(this).val(); 
      $.ajax({ 
       type : "GET", 
       url : 'abc.php', 
       data : { 
        choice : value 
       }, 
       success : function(data){ 
        // Populate the empty container #new_drop 
        $('#new_drop').html(data); 
       } 
      }) 
     }); 
    }); 
</script> 

<form action="" method="post"> 
    <select class="form-control" id="city" action="" name="city" value=""> 
     <!-- 
      Your options are malformed. Missing close ">" 
      probably just copy error 
     --> 
     <option value="">--</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select><br/> 
    </div> 
    <!-- Add id="new_drop" to this div --> 
    <div class="form-group" id="new_drop"> 
    </div> 

В идеале вы хотите иметь верхнюю часть на новой странице, и, возможно, возвращать набор данных, в отличии от прямого HTML, но Ajax является очень гибкой.