Wie fülle ich mithilfe von JavaScript ein Dropdown-Menü basierend auf der Auswahl in einem anderen aus?

Ein Dropdown-Menü basierend auf der Auswahl in einem anderen mit JavaScript füllen

Wenn Sie vor der Aufgabe stehen, die Optionen in einem Dropdown-Menü basierend auf der in einem anderen ausgewählten Auswahl dynamisch zu aktualisieren, ist dies der Fall wichtig, um unnötige Komplexitäten wie Datenbankabfragen zu vermeiden. Lassen Sie uns eine einfache JavaScript-basierte Lösung erkunden, die dies ohne die Notwendigkeit von AJAX-Aufrufen erreicht.

Um diesen Ansatz zu veranschaulichen, stellen Sie sich ein Szenario vor, in dem Sie zwei Dropdown-Listen haben: Dropdown A mit Optionen wie „Farben“, „ Formen“, „Namen“ und Dropdown B. Wir möchten die Optionen in Dropdown B basierend auf der in Dropdown A getroffenen Auswahl füllen.

Beispielcode

Die folgende JavaScript-Funktion zeigt, wie das geht Diese Funktionalität erreichen:

<code class="javascript">function configureDropDownLists(ddl1, ddl2) {
  var colours = ['Black', 'White', 'Blue'];
  var shapes = ['Square', 'Circle', 'Triangle'];
  var names = ['John', 'David', 'Sarah'];

  switch (ddl1.value) {
    case 'Colours':
      ddl2.options.length = 0;
      for (i = 0; i < colours.length; i++) {
        createOption(ddl2, colours[i], colours[i]);
      }
      break;
    case 'Shapes':
      ddl2.options.length = 0;
      for (i = 0; i < shapes.length; i++) {
        createOption(ddl2, shapes[i], shapes[i]);
      }
      break;
    case 'Names':
      ddl2.options.length = 0;
      for (i = 0; i < names.length; i++) {
        createOption(ddl2, names[i], names[i]);
      }
      break;
    default:
      ddl2.options.length = 0;
      break;
  }
}

function createOption(ddl, text, value) {
  var opt = document.createElement('option');
  opt.value = value;
  opt.text = text;
  ddl.options.add(opt);
}

HTML-Markup

Das folgende HTML-Markup enthält zwei Dropdown-Listen:

<code class="html"><select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
  <option value=""></option>
  <option value="Colours">Colours</option>
  <option value="Shapes">Shapes</option>
  <option value="Names">Names</option>
</select>

<select id="ddl2"></select></code>

Verwendung

Zur Nutzung dieser Funktionalität Rufen Sie einfach die Funktion configureDropDownLists auf und übergeben Sie das erste Dropdown-Menü (ddl1) und das zweite Dropdown-Menü (ddl2) als Argumente. Die Funktion verarbeitet das dynamische Auffüllen von Dropdown B basierend auf der in Dropdown A getroffenen Auswahl.

Dieses Codefragment zeigt eine vollständig funktionierende Lösung, die es Ihnen ermöglicht, ein Dropdown basierend auf der in einem anderen mithilfe von JavaScript getroffenen Auswahl dynamisch zu füllen , ohne dass Datenbankaufrufe oder AJAX-Anfragen erforderlich sind.

Das obige ist der detaillierte Inhalt vonWie fülle ich mithilfe von JavaScript ein Dropdown-Menü basierend auf der Auswahl in einem anderen aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!