add multiple values to array in select box

Question

I have the below working based on the accepted answer in this question.

see this link for how this works

<form action="" name="testform" method="post" id="testform">
<div id='div_block1'>
<input type="text" value="" name="a[]" class='input_text'>
<input type="text" value="" name="b[]" class='input_text'>
<input type="text" value="" name="c[]" class='input_text'>
<select id='block1'>
    <option value="" data-value=""></option>
    <option value="1" data-value="11,12,13">1</option>
    <option value="2" data-value="21,22,23">2</option>
    <option value="3" data-value="31,32,33">3</option>
    <option value="4" data-value="41,42,43">4</option>
    <option value="5" data-value="51,52,53">5</option>
</select>     
</div>
<div id='div_block2'>        
<input type="text" value="" name="a[]" class='input_text'>
<input type="text" value="" name="b[]" class='input_text'>
<input type="text" value="" name="c[]" class='input_text'>
<select id='block2'>
    <option value="" data-value=""></option>
    <option value="1" data-value="11,12,13">1</option>
    <option value="2" data-value="21,22,23">2</option>
    <option value="3" data-value="31,32,33">3</option>
    <option value="4" data-value="41,42,43">4</option>
    <option value="5" data-value="51,52,53">5</option>
</select>     
</div>
</form>
<script>
$(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(',');
            $('div#'+div_id+' input[name="a[]"]').val(a[0]);
            $('div#'+div_id+' input[name="b[]"]').val(a[1]);
            $('div#'+div_id+' input[name="c[]"]').val(a[2]);
        } else {
            $('div#'+div_id+' input.input_text').val('');
            }
    });
});    
</script>

I want to change it up slightly so that if I select 1 for example I get two values for a[], b[], c[]

I have done the below

<form action="" name="testform" method="post" id="testform">
<div id='div_block1'>
<input type="text" value="" name="a[]" class='input_text'>
<input type="text" value="" name="b[]" class='input_text'>
<input type="text" value="" name="c[]" class='input_text'>
<input type="text" value="" name="a[]" class='input_text'>
<input type="text" value="" name="b[]" class='input_text'>
<input type="text" value="" name="c[]" class='input_text'>        
<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 id='div_block2'>        
<input type="text" value="" name="a[]" class='input_text'>
<input type="text" value="" name="b[]" class='input_text'>
<input type="text" value="" name="c[]" class='input_text'>
<input type="text" value="" name="a[]" class='input_text'>
<input type="text" value="" name="b[]" class='input_text'>
<input type="text" value="" name="c[]" class='input_text'>
<select id='block2'>
    <option value="" data-value=""></option>
    <option value="1" data-value="11,12,13,95,44,32">1</option>
    <option value="2" data-value="21,22,23,12,35,51">2</option>
    <option value="3" data-value="31,32,33,21,12,24">3</option>
    <option value="4" data-value="41,42,43,35,52,15">4</option>
    <option value="5" data-value="51,52,53,23,42,15">5</option>
</select>     
</div>
</form>

see fiddle. From my understanding of how the first one worked I thought this would work however it is only taking the last value for a[], b[], c[] eg 6,12,8,6,12,8 instead of 11,12,13,6,12,8 if you select 1.

What else do I need to add to get this working as desired?

Call: a[0], b[0], c[0], a[1], b[1], c[1] and so on... grup it in the element in the form and in js — Alex Ball
– Alex Ball, Commented Jul 24, 2012 at 13:18

FabianoLothor · Accepted Answer · 2012-07-26 14:07:07Z

I simplified the JS

Add a class to suit any flag for the inputs

<div>
    <form action="" name="testform" method="post" id="testform">
    <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 id='div_block2'>        
        <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='block2'>
        <option value="" data-value=""></option>
        <option value="1" data-value="11,12,13,95,44,32">1</option>
        <option value="2" data-value="21,22,23,12,35,51">2</option>
        <option value="3" data-value="31,32,33,21,12,24">3</option>
        <option value="4" data-value="41,42,43,35,52,15">4</option>
        <option value="5" data-value="51,52,53,23,42,15">5</option>
        </select>     
    </div>
    </form>
<div>

Now use the following JS

$(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('');
    }
});

});

This is actually much better JS than I had as I would have had to add a new line each time my dataset got bigger. This makes it much more managable.

Alex Ball · Accepted Answer · 2012-07-24 13:20:16Z

1

Use this:

    <input type="text" value="" name="a[0]" class='input_text'>
    <input type="text" value="" name="b[0]" class='input_text'>
    <input type="text" value="" name="c[0]" class='input_text'>
    <input type="text" value="" name="a[1]" class='input_text'>
    <input type="text" value="" name="b[1]" class='input_text'>
    <input type="text" value="" name="c[1]" class='input_text'>

and this:

        $('div#'+div_id+' input[name="a[0]"]').val(a[0]);
        $('div#'+div_id+' input[name="b[0]"]').val(a[1]);
        $('div#'+div_id+' input[name="c[0]"]').val(a[2]);
        $('div#'+div_id+' input[name="a[1]"]').val(a[3]);
        $('div#'+div_id+' input[name="b[1]"]').val(a[4]);
        $('div#'+div_id+' input[name="c[1]"]').val(a[5]);

answered Jul 24, 2012 at 13:20

Alex Ball

4,4842 gold badges20 silver badges23 bronze badges

1 Comment

ak85 Over a year ago

yes this works thanks. I actually tried doing that in the html and in the js seperatly but not both at the same time.

Collectives™ on Stack Overflow

add multiple values to array in select box

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related