I have two selection boxes, both filled from database and displayed on a web site(that works for now).
When the user choose an item in first select dropdown, I want to reset second select dropdown and fill it with other values based on the first select dropdown value.
I am using an MVC handler to do this.
<div style="position:absolute;left:356px;top:110px;width:193px;height:17px;border:1px #C0C0C0 solid;z-index:150">
<select
name="cmb_listen_bearbeitung"
size="1"
id="cmb_listen_bearbeitung"
onchange="GetSelectedListenBearbeitungValue(this,list_list_eintraege)"
style="position:absolute;left:0px;top:0px;width:100%;height:100%;border-width:0px;font-family:Calibri;font-size:13px;"
tabindex="4">
<?php
if ($listen->num_rows > 0) {
mysqli_data_seek($listen, 0);
while ($row = mysqli_fetch_array($listen)) {
unset($listen_id, $bezeichnung);
$listen_id = $row['listen_id'];
$bezeichnung = $row['bezeichnung'];
if ($liste_ausgewaehlt == $listen_id) {
echo '<option value="' . $listen_id . '"selected>' . $bezeichnung . '</option>';
} else {
echo '<option value="' . $listen_id . '">' . $bezeichnung . '</option>';
}
}
mysqli_data_seek($listen, 0);
}
?>
</select>
</div>
<div style="position:absolute;left:356px;top:163px;width:193px;height:134px;border:1px #C0C0C0 solid;z-index:151">
<select name="list_list_eintraege"
size="10"
id="list_list_eintraege"
onchange="GetSelectedListenEintragValue(this)"
style="position:absolute;left:0px;top:0px;width:100%;height:100%;border-width:0px;font-family:Calibri;font-size:13px;"
tabindex="5">
<?php
if ($listeneintrag->num_rows > 0) {
while ($row = mysqli_fetch_array($listeneintrag)) {
unset($listen_id, $entry_short, $entry_long);
$listen_id = $row['listen_id'];
if ($listen_id == $liste_ausgewaehlt) {
$entry_short = $row['entry_short'];
$entry_long = $row['entry_long'];
echo '<option value="' . $entry_short . '">' . $entry_long . '</option>';
}
}
mysqli_data_seek($listeneintrag, 0);
}
?>
</select>
</div>
<div style="position:absolute;left:356px;top:110px;width:193px;height:17px;border:1px #C0C0C0 solid;z-index:150">
<select
name="cmb_listen_bearbeitung"
size="1"
id="cmb_listen_bearbeitung"
onchange="GetSelectedListenBearbeitungValue(this,list_list_eintraege)"
style="position:absolute;left:0px;top:0px;width:100%;height:100%;border-width:0px;font-family:Calibri;font-size:13px;"
tabindex="4">
<?php
if ($listen->num_rows > 0) {
mysqli_data_seek($listen, 0);
while ($row = mysqli_fetch_array($listen)) {
unset($listen_id, $bezeichnung);
$listen_id = $row['listen_id'];
$bezeichnung = $row['bezeichnung'];
if ($liste_ausgewaehlt == $listen_id) {
echo '<option value="' . $listen_id . '"selected>' . $bezeichnung . '</option>';
} else {
echo '<option value="' . $listen_id . '">' . $bezeichnung . '</option>';
}
}
mysqli_data_seek($listen, 0);
}
?>
</select>
</div>
<div style="position:absolute;left:356px;top:163px;width:193px;height:134px;border:1px #C0C0C0 solid;z-index:151">
<select name="list_list_eintraege"
size="10"
id="list_list_eintraege"
onchange="GetSelectedListenEintragValue(this)"
style="position:absolute;left:0px;top:0px;width:100%;height:100%;border-width:0px;font-family:Calibri;font-size:13px;"
tabindex="5">
<?php
if ($listeneintrag->num_rows > 0) {
while ($row = mysqli_fetch_array($listeneintrag)) {
unset($listen_id, $entry_short, $entry_long);
$listen_id = $row['listen_id'];
if ($listen_id == $liste_ausgewaehlt) {
$entry_short = $row['entry_short'];
$entry_long = $row['entry_long'];
echo '<option value="' . $entry_short . '">' . $entry_long . '</option>';
}
}
mysqli_data_seek($listeneintrag, 0);
}
?>
</select>
</div>
Based on our exchange in the comments, I'm posting a general code
Set your relevant data from the DB in a multidimensional array (I'm assuming this is PHP, because this should be data taken from the DB), like so:
Array
(
[<combobox1 option 1 value>] => Array
(
[0] => <combobox2 option 1 value> // relevant to combobox1 option 1
[1] => <combobox2 option 2 value> // relevant to combobox1 option 1
[2] => <combobox2 option 3 value> // relevant to combobox1 option 1
// and so on
)
[<combobox1 option 2 value>] => Array
(
[0] => <combobox2 option 1 value> // relevant to combobox1 option 2
[1] => <combobox2 option 2 value> // relevant to combobox1 option 2
[2] => <combobox2 option 3 value> // relevant to combobox1 option 2
// and so on
)
// and so forth
)
javascript part:
// passing the PHP array to javascript (I'm calling it $full_data_array here)
<?php foreach($full_data_array as $key => $value): ?>
let key = "<?= $key; ?>";
var optionsArray[key] =
<?php echo '["' . implode('", "', $value) . '"]' ?>;
<?php endforeach; ?>
// the onchange function that updates combobox2
function update_combobox2(){
var chosenField = document.getElementById('combobox1').value; // the value from combobox1
var comboBox2 = document.getElementById('combobox2');
optionsArray[chosenField].map( (option, i) => {
let opt = document.createElement("option");
opt.value = i; // the index. you can insert option value instead
opt.innerHTML = option;
combobox2.append(opt);
});
}
HTML/PHP part:
<select name="combobox1" id="combobox1" onChange="update_combobox2()">
// your options (that should also be set as keys in the array above)
</select>
<select name="combobox2" id="combobox2">
// you can throw in a default empty option here
</select>
NOTES:
I haven't used jQuery in a long while. You might get a more elegant script with it.
This does NOT answer what you described in the title, rather what I understood you needed from our exchange in the comments. For a PHP fill of <select> with DB data, check this question's answers.