在選擇框中添加多個值到數組

Question

我有以下工作基於this question中接受的答案。

看到this link對於如何工作

<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> 

我想稍微改變它，以便如果我選擇1爲例，我得到兩個值的[]，B []，C []

我也做了以下

<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。根據我對第一個工作原理的理解，我認爲這將起作用，但它只取[]，b []，c []的最後一個值，例如6,12,8,6,12,8而不是11， 12,13,6,12,8如果您選擇1。

我還需要添加哪些內容才能按要求工作？

Answer 1

我簡化了JS

添加類，以適應任何標誌的輸入

<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> 

現在使用以下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(''); 
    } 
}); 

}）;

Answer 2

使用此：

<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'> 

這：

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