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

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.

`hide()` and `show()` are your friends. – alex Oct 19 '11 at 05:10 — alex, Oct 19 '11 at 05:10

Martin Ongtangco · Answer 1 · 2011-10-19T06:19:06.230

        <script>
        $(document).ready(function() {
          $('#masterdropdown').showHideOptions().change();
        });

        $.fn.showHideOptions = function() {
         this.change(function() {
           $(".templateDropdowns").hide();
           $('#' + $(this).val()).show();
        });
        return this;
        };

        </script>

        <select id="masterdropdown">
        <option value="template1">template1</option>
        <option value="template2">template2</option>
        <option value="template3">template3</option>
        </select>  
        <select id="template1" class="templateDropdowns">
         <option>ta</option>
         <option>tat</option>
        </select>
        <select id="template2" class="templateDropdowns">
        <option>ete</option>
        <option>eTee</option>
        </select>
        <select id="template3" class="templateDropdowns">
        <option>Te</option>
        <option>Tet</option>
        </select>

Muhammad Usman · Accepted Answer · 2011-10-19T11:09:26.360

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>

edited Oct 19 '11 at 11:09

answered Oct 19 '11 at 05:26

Muhammad Usman

12,439
6
36
59

why are you using nowrap(body) for jquery., How does it change as compared to on Dom Ready – Mike Oct 19 '11 at 18:04
It was for making your previous function work, its no longer needed if you use my method. – Muhammad Usman Oct 19 '11 at 18:09
btw how does this differ from onDomReady, and what is the difference in using $("document").ready(function() { //stuff here }) Can I use $(function() {}) only once in my page And $(function() { //stuff here }) – Mike Oct 19 '11 at 18:12
`$("document").ready(function() { //stuff here })` and `$(function() { //stuff here })` are same, you can use these multiple times and jQuery combines these. `onDomReady` is a jsfiddle thing which is same as `$(document).ready()`. `nowrap(body)` plainly prints JS in body. – Muhammad Usman Oct 19 '11 at 18:19
But, I cant give my options the values like id's of subsequent dropdowns, Is it possible to get around this problem – Mike Oct 19 '11 at 19:59
Keep these IDs in another JSON like `{T1:"#template1"}` – Muhammad Usman Oct 20 '11 at 11:04

score 0 · Answer 3 · answered Oct 19 '11 at 05:22

Attach a change event handler to your master drop down.

In it, just check the select value, and show/hide the corrisponding dropdowns.

Something like this (a bit rusty on javascript)

$("masterdropdown").change(function() {

$("#template1, #template2, #template3, #template4").hide();
var selText = $(this).search("option:selected").text();
if(selText == 'T1') $("#template1").show();
if(selText == 'T2') $("#template2").show();
if(selText == 'T3') $("#template3").show();
if(selText == 'T4') $("#template4").show();

});

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

3 Answers3