Wie fülle ich mithilfe von jQuery ein kaskadierendes Dropdown-Menü mit Städten basierend auf dem ausgewählten Land?

Auffüllen eines kaskadierenden Dropdown-Menüs mit JQuery

Problem:

Sie möchten eine Dynamik erzeugen Formular mit zwei Dropdown-Listen (Land und Stadt) mithilfe von JQuery, um sicherzustellen, dass nur die Städte, die dem ausgewählten Land entsprechen, in der Dropdown-Liste „Stadt“ angezeigt werden.

Original-JavaScript-Code:

Die ursprüngliche JavaScript-Funktion weist beim Betrieb Kompatibilitätsprobleme im Internet Explorer auf. Es füllt das Dropdown-Menü „Stadt“ basierend auf dem ausgewählten Land dynamisch auf und stützt sich dabei auf hartcodierte Arrays von Stadtoptionen.

JQuery-Implementierung:

Um die Kompatibilität zu verbessern und die Implementierung zu vereinfachen, JQuery eingesetzt werden kann. Hier ist ein effizienter Ansatz mit JQuery:

<code class="javascript">jQuery(function ($) {
  var locations = {
    'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'],
    'Spain': ['Barcelona'],
    'Hungary': ['Pecs'],
    'USA': ['Downers Grove'],
    'Mexico': ['Puebla'],
    'South Africa': ['Midrand'],
    'China': ['Beijing'],
    'Russia': ['St. Petersburg'],
  }

  var $locations = $('#location');
  $('#country').change(function () {
    var country = $(this).val(), lcns = locations[country] || [];

    var html = $.map(lcns, function (lcn) {
      return '<option value="' + lcn + '">' + lcn + '</option>'
    }).join('');
    $locations.html(html)
  });
});</code>

Erklärung:

• Wir definieren Objektstandorte, die Länder Arrays entsprechender Städte zuordnen.
• Der Change-Event-Handler für das Dropdown-Menü „Land“ löst die dynamische Bevölkerung des Dropdown-Menüs „Stadt“ aus.
• Der Event-Handler ruft das ausgewählte Land ab und ruft das entsprechende Städte-Array aus dem Standortobjekt ab.
• Eine Schleife erstellt HTML-Optionselemente für die Städte und hängt sie mit $locations.html(html) an das Dropdown-Menü „Stadt“ an.

Demo:

Das können Sie Eine funktionierende Demo finden Sie unter dem bereitgestellten Fiddle-Link.

Diese JQuery-Implementierung ist prägnant, browserübergreifend kompatibel und erleichtert das dynamische Auffüllen des kaskadierenden Dropdowns.

Das obige ist der detaillierte Inhalt vonWie fülle ich mithilfe von jQuery ein kaskadierendes Dropdown-Menü mit Städten basierend auf dem ausgewählten Land?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!