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

Problem:

Sie möchten eine Dynamik erstellen 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 Stadt angezeigt werden Dropdown-Liste.

Original-JavaScript-Code:

Die ursprüngliche JavaScript-Funktion weist während ihrer Arbeit 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:

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 ''   lcn   ''
    }).join('');
    $locations.html(html)
  });
});

Erläuterung:

• Wir definieren Objektstandorte, die Länder Arrays entsprechender Städte zuordnen.
• Der Änderungsereignishandler für das Dropdown-Menü „Land“ löst die dynamische Bevölkerung des Dropdown-Menüs „Stadt“ aus.
• Der Ereignishandler ruft das ausgewählte Land ab und ruft das entsprechende Städte-Array von den Standorten ab Objekt.
• 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:

Sie können auf den bereitgestellten Fiddle-Link für eine funktionierende Demo verweisen.

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