CODEWITHSUNDEEP
javascriptjqueryhtmlarraysjquery-ui
gotnull
gotnull

Reputation: 27214

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

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>

Upvotes: 0

Views: 1874

Answers (1)

Igor Dymov
Igor Dymov

Reputation: 16460

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/

Upvotes: 2

Related Questions