Handling change event for a dropdown using jQuery

Question

I am trying to handle a change event for a dropdrown which looks like this:

 <div>
    <select id="serviceLine">
      <option selected="selected">--Select Option--</option>
      <option>Integration</option>
      <option>BPM</option>
      <option>GWT</option>
      <option>Other</option>
    </select>
 </div>

Now,I want to add a textarea when the user selects option "Others". The jQuery looks like this:

function otherHandler(){
       $(this).siblings("textarea").remove();
       if($(this).val()=="Other"){

              var textbox="<textarea rows='3'></textarea>";
              $(this).parent().append(textbox);
       }

}

$("#serviceLine").on("change",function(){otherHandler()});

This doesn't work, because in otherHandler() $(this) contains the reference of the entire window and not just the dropbox.

However if I change my jQuery to this, it works fine:-

function otherHandler(that){
       $(that).siblings("textarea").remove();
       if($(that).val()=="Other"){

              var textbox="<textarea id='slOther'rows='3'></textarea>";
              $(that).parent().append(textbox);
       }

}


$("#serviceLine").on("change",function(){otherHandler(this)});

My question is why didn't it work in the first case, why do we have to pass the reference explicitly? Am I missing something major here?

If you have otherHandler wrapped in an anonymous function for some reason, like there's other code before or after it, then you can obtain the proper this value in otherHandler() by using .call() or .apply() to invoke the function. otherHandler.call(this) — cookie monster
– cookie monster, Commented Feb 14, 2014 at 17:45

Satpal · Accepted Answer · 2014-02-14 17:44:40Z

2

In your first case it didn't worked as this is for defined for the event handler.

$("#serviceLine").on("change",function(){
    // this is accessible here in event handler not in the otherHandler function call
     otherHandler();
});

You should have directly passed the reference of function

$("#serviceLine").on("change", otherHandler);

If you wish you can use .apply(this)

function otherHandler(){
       $(this).siblings("textarea").remove();
       if($(this).val()=="Other"){

              var textbox="<textarea rows='3'></textarea>";
              $(this).parent().append(textbox);
       }

}

$("#serviceLine").on("change",function(){
   otherHandler.apply(this);
});

edited Feb 14, 2014 at 17:44

answered Feb 14, 2014 at 17:39

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cookie monster Over a year ago

This is the correct solution. Not sure why it's getting downvoted. +1

Tushar Gupta - curioustushar · Accepted Answer · 2014-02-14 17:40:45Z

1

Raed this keyword

$("#serviceLine").on("change",function(){
    //this --> is local to the function block here you cannot use it outside
});

$("#serviceLine").on("change",function(){otherHandler(this)});
                                                      //^

Here you pass the reference of this to the function so it works

Better use

$("#serviceLine").on("change", otherHandler);
                                //^ function name

answered Feb 14, 2014 at 17:40

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Collectives™ on Stack Overflow

Handling change event for a dropdown using jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related