Build An Array Of Ids Of All Select Boxes

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 i

Solution 1:

Remove test = before your jQuery call. You’re overwriting your original test array.

This is all you need:

var test =  [];

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

console.log(test);

Solution 2:

The issue with your code is because you're assigning test to the result of each(), which is a jQuery object, not the array you originally define. Simply remove test = from that statement.

Note that you can also make the logic more succinct by using map() instead of an each() loop and by removing the outdated on* attributes with unobtrusive JS event handlers. Something like this:

var test = $("select").map(function() {
  return this.id
}).get();

console.log(test);

$('#s1, #s2').change(function() {
  $(this).next().val($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select-editable">
  <select id="s1">
    <option value=""></option>
    <option value="115x175 mm">115x175 mm</option>
    <option value="120x160 mm">120x160 mm</option>
    <option value="120x287 mm">120x287 mm</option>
  </select>
  <input type="text" name="format" value="" />
</div>

<div class="select-editable">
  <select id="s2">
    <option value=""></option>
    <option value="115x175 mm">115x175 mm</option>
    <option value="120x160 mm">120x160 mm</option>
    <option value="120x287 mm">120x287 mm</option>
  </select>
  <input type="text" name="format" value="" />
</div>