I need to dynamically populate the second select box based on the option selected in the first select box.
Here's what I have tried so far, but it doesn't seem to be working as expected. HTML:
<form id="step1">
<p>
Creator:
<select name="creator" id="creator">
<option></option>
<option name="hello" value="hello">Hello</option>
<option name="abc">oiasfn</option>
</select>
</p>
<p>
Trip Title:
<select name="title" id="title">
<option></option>
</select>
</p>
</form>Javascript/jQuery:
$(document).ready(function(){
updateForm();
});
function updateForm(){
document.getElementById("creator").onchange = populateTitle;
}
function populateTitle(){
var select = document.getElementById("creator");
if(select.options[select.selectedIndex].value === "hello"){
select.options.add(new Option('Byebye', 'Bye'));
}
}