[jQuery] Adding select option values to hidden field
Hi all -
I have a a table within a form which holds rows with a dropdown list
in each. After the options have been selected, I need to add those to
a hidden input field with the values separated by a comma.
This is what I currently have which works when there's only one table
row but not multiple. The user has the ability to add new rows to the
table dynamically but I've left that out of this code for simplicity.
Can anyone help?
<script type="text/javascript">
$(document).ready(function($) {
var select-values = [];
$("select[id^=select-]").change(function(e){
select-values.push( $(this).val() );
$("#all-select-values").val( select-values.join(',') );
});
});
</script>
<form>
<table>
<tr id="row-1">
<td>
<select id="select-1">
<option value="10">Ten</option>
<option value-"11">Eleven</option>
</select>
</td>
</tr>
<tr id="row-2">
<td>
<select id="select-2">
<option value="10">Ten</option>
<option value-"11">Eleven</option>
</select>
</td>
</tr>
<tr id="row-3">
<td>
<select id="select-3">
<option value="10">Ten</option>
<option value-"11">Eleven</option>
</select>
</td>
</tr>
</table>
<input type="hidden" name="all-select-values" id="all-select-values"
value="" />
<input type="submit" value="Submit" />
</form>