jQuery - Store drop down values from multiple selects in an array

Question

The following code populates the second select statement with HTML data. The problem I'm facing is that I clone the two select statements and on submission of the form, I'd like to save all of the selected option values from the two selects into an Array().

What would be the best way to iterate through all of the drop-down values (there's a maximum of 5 that can be added for both Subject Matter and Category)?

Thanks in advance.

$(".SubjectCategory").live("click", function () {
    var $this = $(this);
    var $elem = $this.closest('div').nextAll('div').first().find('select');
    var a = $this.val();

    $.get("/userControls/BookSubjectHandler.ashx?category=" + a, {}, function (data) {
        $elem.html(data);
    });
});

<div class="singleField subjectField">
  <label id="Category" class="fieldSml">Subject Matter</label>
  <div class="bookDetails ddl"><select id="ddlSubjectMatter" class="fieldSml SubjectCategory"></select></div>

  <label id="Subjects" class="fieldSml">Category</label> 
  <div class="bookDetails ddl" id="subjectMatter"><select id="ddlSubjects" class="fieldSml Subjects"></select></div>
</div>

Igor Dymov · Accepted Answer · 2011-10-03 06:32:40Z

2

Using jQuery .map function you can retrieve all values at once:

var arrayOfValues = $(".bookDetails.ddl select").map(function (i, el) { return $(el).val(); }).get();

fiddle: http://jsfiddle.net/e9zxY/

answered Oct 3, 2011 at 6:32

Igor Dymov

16.5k5 gold badges52 silver badges56 bronze badges

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

Collectives™ on Stack Overflow

jQuery - Store drop down values from multiple selects in an array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related