So You Need To Fill a Dropdown Dynamically

Sie haben ein Dropdown-Menü, und je nach Auswahl des Benutzers in diesem einen wird ein zweites Dropdown mit Auswahlmöglichkeiten gefüllt. Wir werden drei verschiedene Wege behandeln, wie Sie das machen können.

Demo anzeigen   Dateien herunterladen

Der Markup

Für unser Beispiel ist der Markup immer gleich, nur zwei einfache select-Elemente. Das erste hat drei Optionen. Die erste informiert den Benutzer, eine Option auszuwählen, und die nächsten beiden sind tatsächliche Auswahlmöglichkeiten. Das zweite select hat nur eine Option, die den Benutzer auffordert, zuerst aus dem ersten Dropdown auszuwählen. Die Optionen im zweiten Dropdown werden dynamisch ersetzt.

<select id="first-choice">
  <option selected value="base">Please Select</option>
  <option value="beverages">Beverages</option>
  <option value="snacks">Snacks</option>
</select>

<br>

<select id="second-choice">
  <option>Please choose from above</option>
</select>

Option 1: Textdateien verwenden

Die Idee für diesen Beitrag stammt von Robert Young, der mir diese Technik mitgeteilt hat. Die Idee ist, dass sie einfach zu verwenden und zu verstehen ist. Nicht jeder möchte sich mit Datenbanken und Ähnlichem auseinandersetzen.

Für jede Möglichkeit eine Textdatei haben

In diesen Textdateien die HTML-Ersetzung für neue Optionen bereithalten

<option>Coffee</option>
<option>Coke</option>

Jetzt verwenden wir jQuery, um die Änderung des ersten Selects zu beobachten. Alle unsere Beispiele verwenden jQuery.

$("#first-choice").change(function() {
   $("#second-choice").load("textdata/" + $(this).val() + ".txt");
});

Das funktioniert gut. Es ist tatsächlich einfach zu machen. Die potenziellen Nachteile sind 1) Daten in HTML-Tags wie diesem zu speichern ist vielleicht nicht der richtige Weg, diese Daten sind schwer für andere Zwecke wiederzuverwenden. 2) Nicht besonders skalierbar, da für jede einzelne Möglichkeit eine neue Textdatei erforderlich ist.

Option 2: JSON-Daten verwenden

Eine Alternative ist, die benötigten Daten im JSON-Format zu speichern. Sie könnten sie direkt in Ihrem JavaScript haben, das Sie laden, oder sie in einer externen Datei aufbewahren. Für diese Demo wird es eine externe Datei namens data.json sein. Das sind ihre Inhalte

{
  "beverages": "Coffee,Coke",
  "snacks": "Chips,Cookies"
}

Wir beobachten erneut eine Änderung des Werts des ersten Selects, laden dann die JSON und ermitteln, welche Teile davon wir benötigen

$("#first-choice").change(function() {

	var $dropdown = $(this);

	$.getJSON("jsondata/data.json", function(data) {
	
		var key = $dropdown.val();
		var vals = [];
							
		switch(key) {
			case 'beverages':
				vals = data.beverages.split(",");
				break;
			case 'snacks':
				vals = data.snacks.split(",");
				break;
			case 'base':
				vals = ['Please choose from above'];
		}
		
		var $secondChoice = $("#second-choice");
		$secondChoice.empty();
		$.each(vals, function(index, value) {
			$secondChoice.append("<option>" + value + "</option>");
		});

	});
});

Der Vorteil hier ist, dass wir die Daten ziemlich generisch speichern, sodass es einfach wäre, sie für andere Zwecke wiederzuverwenden. Beachten Sie, dass wir die Option-Tags im JavaScript selbst hinzufügen, das ist ziemlich flexibel. Die Nachteile dieser Technik sind, dass sie etwas komplizierter ist (aber wirklich, es ist nicht so schlimm). Wir könnten erwägen, das JSON in separate Dateien aufzuteilen, damit wir nicht alle Daten bei jeder Änderung laden müssen, aber dann stoßen wir auf dasselbe Skalierbarkeitsproblem wie bei Textdateien. Die Datenbank, die uns JSON zurückgibt, ist hier auch eine Möglichkeit.

Option 3: Eine Datenbank verwenden

Wir werden weiterhin das erste Select mit jQuery beobachten und die neuen Optionen dynamisch mit der .load()-Funktion von jQuery laden. Aber um aus einer Datenbank abzurufen, benötigen wir einen Vermittler, der diese Datenbankgespräche für uns führen kann (JavaScript kann das nicht von selbst). Wir verwenden also eine Datei "getter.php", und diese Datei wird uns das zurückgeben, was wir brauchen.

Zuerst benötigen wir eine sehr einfache Datenbank, aus der wir abrufen können

CREATE TABLE `dd_vals` (
  `index` int(11) NOT NULL,
  `category` varchar(255) NOT NULL,
  `dd_val` varchar(255) NOT NULL,
  UNIQUE KEY `index` (`index`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

INSERT INTO `dd_vals` (`index`, `category`, `dd_val`) VALUES (1, 'snacks', 'Chips'),
(2, 'snacks', 'Cookies'),
(3, 'beverages', 'Coffee'),
(4, 'beverages', 'Coke');

Jetzt können wir diese Datenbank in der Tabelle "dd_vals" nach Einträgen abfragen, die Snacks oder Getränke als Kategorie haben, und nur das erhalten, was wir wollen. Unsere Abfrage muss etwa so enden:

SELECT * FROM dd_vals WHERE category='beverages'

Machen wir also unsere Datei getter.php, die sich mit dieser Datenbank verbindet und einen GET-Parameter für die Kategoriewahl hat, fügen wir diesen in die Abfrage ein und geben zurück, was sie findet, in Option-Tags.

<?php

	$username = "username";
	$password = "password";
	$hostname = "localhost";
	
	$dbhandle = mysql_connect($hostname, $username, $password) or die("Unable to connect to MySQL");
	$selected = mysql_select_db("dropdownvalues", $dbhandle) or die("Could not select examples");
	$choice = mysql_real_escape_string($_GET['choice']);
	
	$query = "SELECT * FROM dd_vals WHERE category='$choice'";
	
	$result = mysql_query($query);
		
	while ($row = mysql_fetch_array($result)) {
   		echo "<option>" . $row{'dd_val'} . "</option>";
	}
?>

Jetzt ist unser JavaScript wirklich einfach. Wir beobachten wieder Änderungen am ersten Dropdown und laden die Datei getter.php in das zweite Dropdown. Der schicke Trick hier ist, der Datei getter.php einen URL-Parameter zu übergeben, der der Wert aus dem ersten Dropdown ist.

$("#first-choice").change(function() {
  $("#second-choice").load("getter.php?choice=" + $("#first-choice").val());
});

Für sehr kleine Websites und isolierte Beispiele kann eine Datenbank viel Arbeit oder sogar übertrieben erscheinen, aber dies ist bei weitem die flexibelste Option. Der Code ist sauber, schnell, die Daten sind so gespeichert, dass wir fast alles damit machen können usw.

Das ist nicht alles?

Wie bei allem im Web gibt es noch mehr Wege, dies anzugehen. Wir könnten die Werte in einem assoziativen Array speichern. Wir könnten MongoDB verwenden. Wir könnten die verschiedenen Selects fertig im HTML haben und sie nach Bedarf mit JavaScript ein- und ausblenden. Sie alle haben Vor- und Nachteile.

Demo anzeigen   Dateien herunterladen

Hinweis: Ich füge das Datenbankbeispiel nicht in den Download ein, da es erst funktioniert, wenn Sie Ihre eigene Datenbank zum Verbinden haben und alles andere. So ist es weniger verwirrend.