Add value to hidden form field jquery multiple select options
HTML
<div>
<form>
<div id='div_block1'>
<input type="text" value="" name="a[]" class='input_text flag'>
<input type="text" value="" name="b[]" class='input_text flag'>
<input type="text" value="" name="c[]" class='input_text flag'>
<input type="text" value="" name="a[]" class='input_text flag'>
<input type="text" value="" name="b[]" class='input_text flag'>
<input type="text" value="" name="c[]" class='input_text flag'>
<select id='block1'>
<option value="" data-value=""></option>
<option value="1" data-value="11,12,13,6,12,8">1</option>
<option value="2" data-value="21,22,23,8,10,33">2</option>
<option value="3" data-value="31,32,33,2,8,6">3</option>
<option value="4" data-value="41,42,43,22,54,63">4</option>
<option value="5" data-value="51,52,53,12,34,55">5</option>
</select>
</div>
</div>
CSS
div {
float:left;
width:100%;
}
input {
width:50px;
}
JavaScript
$(function () {
$('select').on('change', function () {
var div_id = 'div_' + $(this).attr('id');
var select_val = $(this).find('option:selected').data('value');
console.log();
if (select_val != '') {
var a = select_val.split(',');
var count = 0;
$('div#' + div_id + ' .flag').each(function () {
$(this).val(a[count]);
++count;
});
} else {
$('div#' + div_id + ' input.input_text').val('');
}
});
});