AJAX DropDown nicht bevölkern

Question

Ich benutze Jquery und PHP. Bei Auswahl des ersten Dropdown-Menüs sollte der Wert des ersten Dropdown-Menüs an eine Mysql-Abfrage übergeben werden und dann das zweite Dropdown-Menü ausfüllen. Das zweite Dropdown-Feld wird jedoch leer angezeigt.

<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

Von unserer Konversation in den Kommentaren rufen Sie die gleiche Seite, die Sie ursprünglich laden. Das ist technisch gesehen nicht unbedingt ein Problem, es wird einfach nicht richtig umgesetzt. Um die gleiche Seite zu laden, müssen Sie tun:

<?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> 

Idealerweise möchte man den oberen Teil auf einer neuen Seite haben, und möglicherweise eine Reihe von Daten zurück zu gerade html Gegensatz, aber Ajax ist sehr flexibel.