I have a code something below:
function showHideOptions() {
$("#template1, #template2, #template3, #template4").css("display","none");
$(this).css("display","block");
}
And I have four select dropdowns, At a particular time I want to select only one on the option of template selector.
<select id="masterdropdown">
<option>T1</option>
<option>T2</option>
<option>T3</option>
<option>T4</option>
</select>
<select id="template1" onchange="return showHideOptions();">
<option>Template1</option>
<option>Template2</option>
<option>Template3</option>
<option>Template4</option>
</select>
<select id="template2" onchange="return showHideOptions();">
<option>Template1</option>
<option>Template2</option>
<option>Template3</option>
<option>Template4</option>
</select>
<select id="template3" onchange="return showHideOptions();">
<option>Template1</option>
<option>Template2</option>
<option>Template3</option>
<option>Template4</option>
</select>
<select id="template4" onchange="return showHideOptions();">
<option>Template1</option>
<option>Template2</option>
<option>Template3</option>
<option>Template4</option>
</select>
CSS:
#template1, #template2, #template3, #template4{display:none;}
Basically I have a top dropdown(masterdropdown), which is always Visible this is also a template selector, On select of its options I want to show a particular template drodown that corresponds to that selected option in masterdropdown. How can this be acheived in jquery. does $(this)
not work in this case, being called from a function.
See a working Demo http://jsfiddle.net/X5mWL/
JS
$(function(){
$("#masterdropdown").change(function() {
$("#template1, #template2, #template3, #template4").hide();
$($("#masterdropdown").val()).show();
});
});
HTML
<select id="masterdropdown">
<option value="#template1">T1</option>
<option value="#template2">T2</option>
<option value="#template3">T3</option>
<option value="#template4">T4</option>
</select>
<select id="template1">
<option>Template1</option>
<option>Template2</option>
<option>Template3</option>
<option>Template4</option>
</select>
<select id="template2">
<option>Template1</option>
<option>Template2</option>
<option>Template3</option>
<option>Template4</option>
</select>
<select id="template3">
<option>Template1</option>
<option>Template2</option>
<option>Template3</option>
<option>Template4</option>
</select>
<select id="template4">
<option>Template1</option>
<option>Template2</option>
<option>Template3</option>
<option>Template4</option>
</select>