Wie kann ich eine Dropdown-Liste füllen, indem ich den Wert aus einer anderen Dropdown-Liste auswähle?

Question

Ich habe zwei Drop-Downs (wie Staat und Stadt) durch Abrufen der Datensätze von beiden Dropdown-Dateien aus MySQL-Datenbank und versuche, das Werkzeug zu bauen, in dem, während der Auswahl eines Wertes (dh jeder Staat) von der ersten Dropdown-Liste an zu dieser Zeit in der zweiten Dropdown-Liste (in der Stadt) sollten nur die Werte (Städte) unter diesem Wert (Zustand) sichtbar sein, die in der ersten Dropdown-Liste ausgewählt wurden.

Hier ist mein Code:

<tr>  
     <td id='hed'><span style="font-family:verdana,geneva,sans- serif">State</state></td> 
     <td> 
     <?php 
     $dbcon = mysql_connect("@ip","@username","@password"); 

     if($dbcon) 
     { 
      mysql_select_db("@database", $dbcon); 
     } 
     else 
     { 
      die('error connecting to the database'); 
     } 

     $qry = "select @value(state) from @tablename "; 
     $result = mysql_query($qry) or die(mysql_error()); 

     $dropdown = "<select name='@valuename' id='officeItemList' style='cursor:pointer;cursor:hand;'>"; 
     while($row = mysql_fetch_array($result)) 
     {   
      $dropdown .= "\r\n<option value='{$row['@value']}' > {$row['@value']} </option>"; 
     } 
     $dropdown .= "\r\n</select>"; 
     echo $dropdown; 
     mysql_close($dbcon); 
     ?> 
     </td> 
    </tr> 

     <tr> 
     <td id='hed'><span style="font-family:verdana,geneva,sans-serif">City</span></td> 
     <td colspan="1"> 
     <?php 
     $dbcon = mysql_connect("@ip","@username","@password"); 

     if($dbcon) 
     { 
      mysql_select_db("@database", $dbcon); 
     } 
     else 
     { 
      die('error connecting to the database'); 
     } 

     $qry = "select value2(city) from @tablename where "; 
     $result = mysql_query($qry) or die(mysql_error()); 

     $dropdown = "<select name='@value2' id='officeItemList' style='cursor:pointer;cursor:hand;'>"; 
     while($row = mysql_fetch_array($result)) 
     { 

      $dropdown .= "\r\n<option value='{$row['@value2']}' > {$row['@value2']} </option>"; 
     } 
     $dropdown .= "\r\n</select>"; 
     echo $dropdown; 
     mysql_close($dbcon); 
     ?>  


     </td> 
    </tr> 

Answer 1

Sie können AJAX verwenden, um die Städte für den ausgewählten Status abzurufen. Etwas wie:

$("select#state").change(
function(){ 
    var state = $(this).val(); 
    $.ajax({ 
    type: "GET", 
    url: "get_cities.php/?state=" + state, 
// write a query according to the state selected and return the HTML for the OPTION's 
    success: function(cities){ 
    $("select#cities").html(cities); 
    } 
}); 
} 
); 

Sie können auch ein Json-Objekt zurück (in diesem Fall nicht vergessen dataType:"json" hinzufügen) und den Übergang zu HTML in der Client-Seite zu machen, dh innerhalb der success Funktion

Answer 2

, dass der falsche Weg ist. Ihr PHP-Code wird vollständig ausgeführt vor zeigt die Seite für den Benutzer. Die zweite Abfrage kann also nie wissen, dass der Benutzer etwas auswählt.

Richtiger Weg # 1: Tun Sie es auf zwei Seiten. Die erste Seite enthält die erste Kombination und wenn sie gesendet wird, wird die zweite Seite generiert und die zweite Kombination angezeigt.

Richtiger Weg # 2, obwohl nicht optimal: Tun Sie es auf einer Seite. Laden Sie alle möglichen Datensätze für das zweite Combo in ein JS-Array. Platzieren Sie den Listener auf das erste Array. Wenn der Benutzer etwas ausfüllt, füllen Sie die zweite Kombination mit den richtigen Datensätzen aus dem JS-Array.

Richtiger Weg # 3 (ganz rechts von ihnen): Tun Sie es in einer Seite mit AJAX-Anfrage drin. Benutzer wählt einen Wert in der ersten Kombination aus. Sein Listener sendet eine Anfrage an ein Serverskript, das ein JSON-Objekt mit Datensätzen für das zweite Combo zurückgibt.

Answer 3

drei schnelle Punkte:

1. mysql ist unsicher (Sie sollten gU oder mysqli verwenden statt)
2. Stil sollte mit CSS festgelegt werden, nicht inline
3. Sie besser eine asynchrone Anforderung verwendet wird, so dass der Benutzer Erfahrung quickier

Hinweis der Ansicht, dass alle drei Punkte oben leicht erreichbar sind durch einen Rahmen (zumindest auf der Client-Seite, wie CakePHP oder Zend mit , aber Sie können auch nach einem Javascript suchen wie Knockout.js für die UI-Interaktionen)

Answer 4

Es gibt 2 Ansätze, die ich Ihnen vorschlagen würde.

Die erste verwendet nur PHP, muss aber alle verfügbaren Städte pro Status speichern, bevor die Seite gerendert wird. Das ist eine schlechte Lösung!

Ich würde vorschlagen, mit AJAX und einem Javascript-Aufruf zu einem anderen PHP-Skript kann Ihr Problem lösen!

Verwenden Sie jQuery, um ein JavaScript-Framework zu erhalten, das das Leben einfacher macht!

Ihre HTML:

<select id="select-state"> 
    <option value="0">Select a state</option> 
    <option value="ohio">Ohio</option> 
</select> 
<select id="select-city"> 
    <option value="0">Select a state first</option> 
</select> 

erstellen einen PHP-Skript, das die mysql Abfrage mit einem gegebenen Zustand über $ _GET [ "Zustand"] (oder $ _POST) macht.

Kodieren Sie das Ergebnis von mysql als JSON-Objekt und echo es!

{ 
    cities: [ 
     'City 1', 
     'City 2', 
     ... 
    ] 
} 

PHP-Funktion: json_encode()

Sie können dann tun someting wie:

$(function(){ 
    $('#select-state').on("change", function(){ 
     var state = $(this).val(); 
     if(state!=0) { 
      $.get('your/path/to/cities/script.php?state='+state,function(data){ 
       if(data.cities) { 
        $('#select-city').empty(); //remove old entries first 
        for (var city in data.cities) { 
         $option = $('<option>').val(city); 
         $('#select-city').append($option); 
        } 
       } 
      }); 
     } 
    }); 
});