How to get values using jQuery from dropdown array

Question

I need to go through a few <tr>s (I don’t know the exact number beforehand since they are generated on the fly), where I have a few dropdowns. The names of dropdowns are set as item_size[], item_set[] and item_quantity[]. I need to get their value onsubmit.

I understand that I need to use each function here, like $('tr.item').each(function(){ to go through them and then need to find a way to get values chosen in each of the three dropdowns.

Any idea here ? Thanks.

<tr class="item">
    <td>some stuff</td>
    <td><select name = "item_size[]" ...><option>...</option><option>...</option></select></td>
    <td><select name = "item_set[]" ...><option>...</option><option>...</option></select></td>
    <td>some stuff</td>
    <td><select name = "item_quantity[]" ...><option>...</option><option>...</option></select></td>
    <td>some stuff</td>
</tr>
<tr class="item">
    <td>some stuff</td>
    <td><select name = "item_size[]" ...><option>...</option><option>...</option></select></td>
    <td><select name = "item_set[]" ...><option>...</option><option>...</option></select></td>
    <td>some stuff</td>
    <td><select name = "item_quantity[]" ...><option>...</option><option>...</option></select></td>
    <td>some stuff</td>
</tr>
<tr class="item">
    <td>some stuff</td>
    <td><select name = "item_size[]" ...><option>...</option><option>...</option></select></td>
    <td><select name = "item_set[]" ...><option>...</option><option>...</option></select></td>
    <td>some stuff</td>
    <td><select name = "item_quantity[]" ...><option>...</option><option>...</option></select></td>
    <td>some stuff</td>
</tr>

Antony · Accepted Answer · 2013-01-26 11:51:45Z

3

var inputs = new Array();
$("tr.item").each(function() {
    var tr_inputs = new Array();
    $(this).find("select").each(function() {
        tr_inputs[$(this).attr("name")] = $(this).val();
    });
    inputs.push(tr_inputs);
});
console.log(inputs);

You can retrieve the values for each item from the array inputs. Each item consists of 3 key value pairs for item_size[], item_set[] and item_quantity[].

edited Jan 26, 2013 at 11:51

answered Jan 26, 2013 at 11:42

Antony

15.2k10 gold badges48 silver badges76 bronze badges

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

Comments

Babasaheb · Accepted Answer · 2013-01-26 11:55:55Z

0

@Jeremy I didn't get why you set name for select like 'item_size[]' i.e. with array brackets. Instead of seting names, use id attribute like id ='item_size' and you have to set a 'id' or 'class' to your 'td' like

<td class = "itemsize"><select id= "item_size" ...><option>...</option><option>...</option></select></td>
    <td class = "itemset"><select id= "item_set" ...><option>...</option><option>...</option></select></td>

I assume your 'onsubumit' is a simple button click, then you can get selected item of each dropdown list as:

var count =0, itemSize = new Array(), itemSet = new Array();    
$('#yourTableId tr').each(function(index) {

 itemSize[count] = $(this).find('.itemsize').find('#item_size:selected').val();
 itemSet[count] = $(this).find('.itemset').find('#item_set:selected').val();
count++;
}

answered Jan 26, 2013 at 11:55

Babasaheb

7036 silver badges20 bronze badges

1 Comment

cmbuckley Over a year ago

That seems to suggest having multiple IDs with the same name on the page.

cmbuckley · Accepted Answer · 2013-01-26 12:30:42Z

0

It may be as simple as using the built-in function serializeArray():

var result = $('select').serializeArray();

You can manipulate the selector to suit, and once you have the data you can do what you like with it.

Here's a fiddle: http://jsfiddle.net/wnH4m/

Edit: this doesn't group your selects, so if that's what you need, then you're better off rolling your own as in Antony's answer. (You could parse the output of serializeArray(), but it may not be the best idea to loop over the DOM and over the dataset.)

edited Jan 26, 2013 at 12:30

answered Jan 26, 2013 at 12:16

cmbuckley

43k10 gold badges83 silver badges95 bronze badges

2 Comments

Antony Over a year ago

But this is not grouped according to the item involved. In this case, every set of three selects (item_size[], item_set[] and item_quantity[]) belongs to a single item.

cmbuckley Over a year ago

True; I guess it depends on the desired format required by the OP — the question doesn't make it fully clear.

Collectives™ on Stack Overflow

How to get values using jQuery from dropdown array

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related