CODEWITHSUNDEEP
javascriptjquery
user1592380
user1592380

Reputation: 36337

'Mapping' jquery plugin function to multiple DOM elements

I'm trying to convert a bunch of select boxes to be editable using the fantastic jQuery plugin: https://github.com/indrimuska/jquery-editable-select.

The first step is to get the ids of all select boxes. I was able to get help Build an array of ids of all select boxes to get a list of the applicable select box ids.

Now I need to 'map' the jquery plugin function to the array of ids. To use the plugin the basic command is:

$('#editable-select').editableSelect();

I've tried:

 var test =  [];

$( "select" ).each(function() {
    test.push($(this).attr('id'))
});



$( "select" ).each(function() {
    test.push($(this).attr('id'))
});

  test.each(function() {
    $(this).editableSelect();
});

How can I 'map' the plugin function the the appropriate select box DOM elements ?

Upvotes: 1

Views: 62

Answers (1)

A. Iglesias
A. Iglesias

Reputation: 2675

I think this should work...

$('select').each(function() {
    $(this).editableSelect();
});

... but after having a look at the plugin, it doesn't require the selector to get just one jQuery object (makes total sense), so it's even easier...

$('select').editableSelect();

... both options work, but obviously the second is the way to go. Here you have a fiddle with an example...

https://fiddle.jshell.net/1cuy7gsg/

NOTE: .each() is a jQuery function that can only be applied to jQuery objects. That's why you can't apply it to your test javascript array (test.each can't work).

I hope it helps

Upvotes: 1

Related Questions