Search code examples
jqueryfunctionthisonchangefunction-parameter

Can $(this ) object be used to point to a function


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.


Solution

  • 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>