Hi.
I have two conditional select boxes:
[CODE]<script type=”text/javascript”>
$(document).ready(function () {
$department = $(“select[name=’prod’]”);
$ph = $(“select[name=’ph’]”);
$department.change(function () {
if ($(this).val() == “Apple”) {
$(“select[name=’ph’] option”).remove();
$(“<option value=”iphone4″>Iphone 4</option>”).appendTo($ph);
$(“<option value=”iphone5″>Iphone 5</option>”).appendTo($ph);
}
if ($(this).val() == “Samsung”) {
$(“select[name=’ph’] option”).remove();
$(“<option value=”galaxys2″>Galaxy S III</option>”).appendTo($ph);
$(“<option value=”galaxys3″>Galaxy S II</option>”).appendTo($ph);
}
if ($(this).val() == “Nokia”) {
$(“select[name=’ph’] option”).remove();
$(“<option value=”lumia900″>Lumia 900</option>”).appendTo($ph);
$(“<option value=”lumia800″>Lumia 800</option>”).appendTo($ph);
}
if ($(this).val() == “HTC”) {
$(“select[name=’ph’] option”).remove();
$(“<option value=”htconex”>ONE X</option>”).appendTo($ph);
$(“<option value=”htcones”>ONE S</option>”).appendTo($ph);
$(“<option value=”htconev”>ONE V</option>”).appendTo($ph);
$(“<option value=”htcdesirec”>Desire C</option>”).appendTo($ph);
}
if ($(this).val() == “Brand”) {
$(“select[name=’ph’] option”).remove();
$(“<option value=””>Model</option>”).appendTo($ph);
}
});
$(function() {
$(‘#btn’).click(function(){
$(‘.phone’).hide();
$(‘#’ + $(this).val()).show();
});
});
});
</script>[code=html]<form>
<select name=”prod”>
<option>Brand</option>
<option>Apple</option>
<option>HTC</option>
<option>Nokia</option>
<option>Samsung</option>
</select>
<select name=”ph” id=”selector”>
<option value=””>Model</option>
</select>
<input type=”button” id=”btn” value=”Show”>
</form>
<div class=”phone” id=”iphone4″ style=”display:none”>iphone4</div>
<div class=”phone” id=”iphone5″ style=”display:none”>iphone5</div>
Etc…
The conditional select boxes work fine, but try to select “Apple” – how do I display the selected option of #selector when the input button is clicked?