I have a scenario on my website where I want to dynamically add select boxes based on the value selected in the previous one. Here is the code snippet:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js">
</script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.js">
</script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
</style>
<script type="text/javascript">//<![CDATA[
$(function() {
$('#colorselector').change(function(){
$('.colors').hide();
$('#' + $(this).val()).show();
});
});
//]]>
</script>
<select id="colorselector">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
</select>
<div id="red" class="colors" style="display:none"> <select id="colorselector">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select> </div>
<div id="yellow" class="colors" style="display:none">
<select id="colorselector">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<div id="one" class="colors" style="display:none"> one... </div>
<div id="two" class="colors" style="display:none">
<select id="colorselector">
<option value="one">four</option>
<option value="two">five</option>
<option value="three">six</option>
</select>
</div>
Although I managed to display the second select box based on selection, I am facing challenges in adding a third one dynamically.