Hide / Show <select> abhängig von den anderen <select> - Javascript, Jquery, HTML, Ajax, Formularen

ich habe zwei <select> Elemente. Die erste enthält Länder (z. B. USA, Kanada, England, Russland, Polen ...) und die zweite ist versteckt und enthält Städte aus nur USA und Kanada (z. B. New York, Los Angeles, Chicago ... ODER Ottawa, Vancouver, Surrey ...)

Wenn der Benutzer Kanada oder USA als erstes auswählt <select>sollte der zweite zeigen und Erlaube ihm, seine Stadt auszuwählen.

Ist es möglich zu tun? Ich habe so viele Websites mit Ajax- und JQuery-Validierungsformularen besucht und dafür keine ähnliche Quelle gefunden.

Vielen Dank.

Antworten:

Hören Sie sich das Änderungsereignis für die Auswahlliste an. Wenn der ausgewählte Wert im Änderungsereignis "USA" oder "Kanada" ist, wird die andere Auswahlliste angezeigt, andernfalls wird sie ausgeblendet.

Sehen Sie eine Beispiel.

Angenommen, die ausgewählte Struktur sieht folgendermaßen aus:

<select id="countries">
<option val="USA">USA</option>
<option val="Canada">Canada</option>
<option val="Australia">Australia</option>
...
</select>

<select id="cities">
<option val="Vancouver">Vancouver</option>
<option val="New York">New York</option>
...
</select>

Hören Sie sich das Änderungsereignis im Länder-Array an.

$("#countries").change(function() {
// find the selected country
var selectedCountry = $(this).val();
// if US or Canada
if(selectedCountry == "USA" || selectedCountry == "Canada") {
// show the cities list
$("#cities").show();
}
// otherwise hide it
else {
$("#cities").hide();
}
});

Das ist ganz einfach.
Vor allem vorbereiten change Ereignishandler http://api.jquery.com/change/
Zweitens überprüfen Sie den Wert Ihrer Auswahl val : http://api.jquery.com/val/
Drittens, zeigen Sie Ihre Sekunde an oder verstecken Sie sie select. http://api.jquery.com/hide/ oder http://api.jquery.com/show/