Basically, I have 2 <select> elements. What I want is for the user to select an option in the first <select>, and then the options in the second <select> should change based on the selection made in the first one. The second <select> starts off empty, and when an option is chosen in the first <select>, it should dynamically add <options> to the second <select>.
HTML for the first select :
<select name="roof_width" onChange="getWidth(this.selectedIndex)" value="3" class="content_selectinput" id="select_width">
<?php
$i = 0;
$x = 2;
while(isset($dak_breedte[$i]))
{
if(isset($roof_width_index) && $roof_width_index == $i)
{
echo "<option value='$i' id='$i' selected='Selected'>" . $dak_breedte[$i] . " Meter </option>";
$i++;
}
else
{
echo "<option value='$x'>" . $dak_breedte[$i]. " Meter</option>";
$i++;
}
}
?>
</select>
HTML for the second select :
<select name="NokBreedte" onClick="ridgeCheck()" value="3" class="content_selectinput" id="select_ridge" >
</select>
JavaScript :
function getWidth(index)
{
ridge_min = index - 10;
ridge_max = index + 10
ridge_select = document.getElementById("select_ridge");
for(i = 0; i <= 99; i++)
{
if(i < ridge_min || i > ridge_max)
{
ridge_select.add(ridge_values[i]);
}
}
}
The text values for the second <select> are stored in an array. I've searched online and attempted using jQuery, but so far nothing has worked.
To clarify, what I'm looking for is:
When a user selects an option in the first <select>, the options in the second <select> should update instantly.