Wie fülle ich ein Dropdown-Menü basierend auf der Auswahl ohne Datenbankabfragen dynamisch aus?

Dropdown-Menü basierend auf der Auswahl dynamisch füllen

Wenn Sie vor der Aufgabe stehen, den Inhalt eines Dropdown-Menüs basierend auf der in einem anderen Dropdown-Menü getroffenen Auswahl zu ändern, verstehen Sie das Es ist entscheidend, wie diese Funktionalität mit JavaScript implementiert wird. Im Gegensatz zu Situationen, die Datenbankabfragen erfordern, kann dieser Prozess ohne die Verwendung von AJAX vereinfacht werden.

Zur Unterstützung stellen wir Ihnen ein prägnantes und effektives JavaScript-Codebeispiel zur Verfügung, das zeigt, wie das zweite Dropdown-Menü (Dropdown B) basierend aufgefüllt wird auf der im ersten Dropdown (Dropdown A) getroffenen Auswahl. Dieser Code beinhaltet keinen externen Datenabruf oder Datenbankabfragen:

<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);
}</code>

In diesem Code haben wir drei Arrays (Farben, Formen und Namen) definiert, die die Werte enthalten, die in Dropdown B angezeigt werden sollen jede entsprechende Option in Dropdown A.

Wenn ein Benutzer eine Option aus Dropdown A auswählt, wird die Funktion configureDropDownLists aufgerufen. Basierend auf der ausgewählten Option löscht die Funktion den Inhalt von Dropdown B und füllt es erneut mit den entsprechenden Werten aus dem relevanten Array.

Sie können diesen Code implementieren, indem Sie zwei Dropdowns in Ihrem HTML-Dokument erstellen und das onchange-Ereignis verwenden Handler für das erste Dropdown, um die Funktion auszulösen, die das zweite Dropdown füllt.

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