How to convert this javascript code to jquery?

Question

How to convert this javascript code to jquery ?

var ddlArray= new Array();
var ddl = document.getElementById('ddl');
for (i = 0; i < ddl.options.length; i++) {
   ddlArray[i] = ddl .options[i].value;
}

I think one can convert ddl = document.getElementById('ddl'); to ddl = $('#ddl'); but what can be done to the loop ?

But why? The original code works in every browser since IE5, is future proof, not reliant on any library, is easily maintained by anyone with basic javascript knowledge and runs very much faster. The only part where jQuery would be useful is in getting the value of the options, but the accepted answer doesn't use it for that. — RobG
– RobG, Commented Oct 13, 2014 at 0:59
I didn't know jquery was so much slower, does it mean that one shouldn't use jquery ? — Wicelo
– Wicelo, Commented Oct 13, 2014 at 1:04
Not my decision, but you should be aware of all factors when making decisions. If you just want less code (which isn't a good reason on its own), a plain JS version is var ddlArray = [].map.call(document.getElementById('ddl').options, function(opt){return opt.value;});. Note that you'll need a polyfill for .map for IE8, there are libraries to give IE 8 ES5 features. — RobG
– RobG, Commented Oct 13, 2014 at 1:08
taste the future (or now in ff, ch): [].map.call(dd1.options, (a) => a.value) — dandavis
– dandavis, Commented Oct 13, 2014 at 1:11

Fabrício Matté · Accepted Answer · 2014-10-13 00:06:54Z

5

Using .map() + .toArray():

var ddlArray = $('#ddl option').map(function() {
    return this.value;
}).toArray();

Or .toArray() + the generic iterator $.map():

var ddlArray = $.map($('#ddl option').toArray(), function(option) {
    return option.value;
});

Live demo

edited Oct 13, 2014 at 0:06

answered Oct 12, 2014 at 23:27

Fabrício Matté

70.3k27 gold badges135 silver badges168 bronze badges

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

11 Comments

Wicelo Over a year ago

Thank you, do you know where I could find the documentation to learn to do this kind of things ?

Fabrício Matté Over a year ago

@Wicelo no problem, I've just added links to the jQuery API docs in the answer. =]

Bergi Over a year ago

You don't even need to call $.makeArray, just $.map over the array-like jQuery collection.

Fabrício Matté Over a year ago

@Bergi I'm aware of that, however the documentation for $.map frowns upon iterating array-like objects without first converting them to real arrays: "Array-like objects — those with a .length property and a value on the .length - 1 index — must be converted to actual arrays before being passed to $.map(). The jQuery library provides $.makeArray() for such conversions."

Fabrício Matté Over a year ago

@Bergi in my actual code, I have never used $.makeArray() for this use case either, but it is good to keep answers inline with the docs for future-proofness I believe. Anyway, I've switched $.makeArray() by .toArray() to make that sample less ugly.

|

Collectives™ on Stack Overflow

How to convert this javascript code to jquery?

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related