'this' returning different object than expected within JS function

Question

I have a very simple select box:

<select multiple="multiple" name="Condiments">
  <option selected="selected">Mustard</option>
  <option selected="selected">Ketchup</option>
</select>

and I'm using the jQuery UI MultiSelect Widget to make it a bit spiffier:

https://github.com/ehynds/jquery-ui-multiselect-widget

Specifically I'm trying to set one of the options dynamically when the widget is initialized. When I do this:

$("select").multiselect({
  selectedText: function(numChecked, numTotal, checkedItems){
    return "Foo";
  }
});

it properly sets the selectedText option to "Foo" but when I do this:

$("select").multiselect({
  selectedText: function(numChecked, numTotal, checkedItems){
    return $(this).attr("name");
  }
});

it think that $(this) is a span from somewhere else in the DOM.

If there were only one select on the page this would be fine, but with multiple i need a way to set this option for each. Is there an obvious way to get from $(this) to the current select element? or an obvious alternative to solving the same general problem?

As the result of $("select"0 is an array in case of multiple selects, the $(this) will point to the globals window object. Use a class or id to specify the select you want — mozillanerd
– mozillanerd, Commented Apr 13, 2013 at 2:36

John S · Accepted Answer · 2013-04-13 02:31:37Z

2

I think in the selectedText callback, this is the JavaScript object that instruments the multi-select functionality for the <select> element. It has an element property that is a jQuery object that wraps the <select> element.

Therefore you should use:

$("select").multiselect({
    selectedText: function(numChecked, numTotal, checkedItems){
        return this.element.attr("name");
    }
});

answered Apr 13, 2013 at 2:31

John S

21.5k9 gold badges50 silver badges59 bronze badges

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

Comments

charlietfl · Accepted Answer · 2013-04-13 02:50:41Z

A common approach for initializing a plugin on multiple elements that require passing specific data or properties from the element instance that aren't built into the plugin is to loop over the element collection using each:

$('select').each(function(){
   /* "this" will be instance of "select"*/
  /* prep data needed before initialiizing plugin*/

   var name= this.name;
   /* initialize plugin for current instance of element*/
   $(this).multiselect({
      selectedText: function(numChecked, numTotal, checkedItems){
        /* variable declared above*/
         return name;
       }
    });

});

I don't know the particular plugin, or what this is within the callback, but using the approach shown it isn't necessary to know as the instance is already isolated within the each loop

Edit. I wrote this without thinking about plugin being for <select> elemnt. Not sure why you would want name to be returned.. Would be same for any option selected

Collectives™ on Stack Overflow

'this' returning different object than expected within JS function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related