Question

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.

Answer 1

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>