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>

Answer 1

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/