...「input_name []」変更倍数にこれは私が持っている隠された入力されたJavaScript

Question

と選択のように入力に値を追加

<input name="input_name[]" type="hidden"/> 

私は私とすぐに、この入力に値を追加したいと思います

以下のような「のonchange」は、複数のオプションを選択します：

<select id="inputSelect" multiple> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
</select> 

機能であっても、oをJavaScriptを置く場所、私とは無関係です。

私はjavascriptソリューションの回答を受け入れますが、誰かがjqueryソリューションを提供すると重要な情報として受け取り、本当に感謝します。

ありがとうございました。

Answer 1

コアJavascriptを使用したソリューションです。これは、イベントリスナーを<select>入力に添付してから、非表示の値を設定する関数を実行することによって機能します<input>。

<input>をターゲットにするには、document.getElementsByNameを使用し、input_name[]の名前を使用します。この名前の要素が2つ以上ある場合は、角括弧の中のインデックスをinputHidden[0].value = newValue;に変更して、正しいインデックスにする必要があります。この場合、名前がinput_hidden[]の要素が1つあるので、インデックス0を使用します。そこに2つの要素があって、あなたは第二隠さ<input>の値を設定したい場合は、inputHidden[1].value = newValue;

var inputSelect = document.getElementById('inputSelect'); 
 
    
 
inputSelect.addEventListener('change', function() { 
 
    var newValue = []; 
 

 
    for (var i = 0; i < inputSelect.length; i++) { 
 
    if (inputSelect[i].selected) { 
 
     newValue.push(inputSelect[i].value); 
 
    } 
 
    } 
 

 
    var inputHidden = document.getElementsByName('input_name[]'); 
 
    inputHidden[0].value = newValue.join(","); 
 
});

<input name="input_name[]" type="hidden" id="inputHidden"/> 
 
<select id="inputSelect" multiple> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
</select>

Answer 2

を使用するここではjQueryの例だ：

$('#inputSelect').on('change', function(){ 
 
\t var newVal = $(this).val(); 
 
$('#inputHidden').val(newVal); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<input name="input_name[]" id="inputHidden"/> 
 
<select id="inputSelect" multiple> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
</select>