Ziehen Sie Drop-down-Optionen aus einer Datenbank basierend auf der Auswahl in einer anderen dropdown
Ich habe zwei dropdown-Listen als Teil einer form, die ich erschaffe, die beide Optionen, die gezogen werden aus einer mysql-Datenbank. Ich möchte die Optionen in der zweiten dropdown-Liste ändern, basierend auf der Auswahl in der ersten dropdown-Liste. Ich weiß, wie dies zu tun, mit Javascript, wenn die zweite Liste ist statisch, ich möchte aber beide dropdowns dynamisch ziehen Sie aus der Datenbank. Unten ist der HTML-und Javascript-ich bin derzeit mit. Irgendwelche Ideen wäre toll.
HTML:
<form>
<label for="org_name">Organization Name:</label>
<select id="org_name" name="org_name" onchange="configureDropDownLists(this,'submitter_name')">
<option value="empty"> </option>
<?php
mysql_connect("database", "username", "password") or die(mysql_error ());
mysql_select_db("databaseName") or die(mysql_error());
$query = "SELECT * FROM Table";
$result = mysql_query($query);
while($row = mysql_fetch_array($result)){
echo "<option value='" . $row['org_name'] . "'>" . $row['org_name'] . "</option>";
}
mysql_close();
?>
</select>
<label for="submitter_name">Request Submitted By:</label>
<select id="submitter_name" name="submitter_name">
<option value="empty"> </option>
</select>
<input type="Submit" value="Submit">
</form>
Javascript:
function configureDropDownLists(org_name,submitter_name) {
var org = new Array('Submitter 1', 'Submitter 2');
switch (org_name.value) {
case 'org':
document.getElementById(submitter_name).options.length = 1;
for (i = 0; i < org.length; i++) {
createOption(document.getElementById(submitter_name), org[i], org[i]);
}
break;
default:
document.getElementById(submitter_name).options.length = 1;
break;
}
createOption(document.getElementById(submitter_name), 'Other', 'Other');
if (org_name.value === 'empty') {
document.getElementById(submitter_name).options.length = 1;
}
}
function createOption(ddl, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}
Du musst angemeldet sein, um einen Kommentar abzugeben.
Vorgeschlagen, AJAX war die Antwort. Für alle neugierigen, die auf diesen, weiter unten ist die Lösung, die ich kam mit. Ich verließ das HTML unverändert, andere als die Beseitigung
onchange="configureDropDownLists(this,'submitter_name')"
aus dem ersten dropdown-Menü. Statt der über Javascript, die ich verwendet, die unter AJAX und PHP. Funktioniert wirklich sehr schön.JQuery:
wird und die referenzierte PHP-Seite:
Klingt wie Sie benötigen, einige AJAX-ziehen Ihre Daten aus der Datenbank, das format auf der server-Seite (JSON wird wahrscheinlich am einfachsten sein, mit zu arbeiten), dann verwenden Sie eine callback-Funktion in Javascript, die zum Auffüllen der zweiten drop-down auf der Basis der JSON-Daten empfangen werden.