增加值與輸入類似「input_name []」上變化多用JavaScript

選擇這是一個隱藏輸入我有...增加值與輸入類似「input_name []」上變化多用JavaScript

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

我想價值觀，儘快加入到這個輸入作爲我「onchange」多重選擇選項如：

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

放置javascript o的地方即使是一個函數，與我無關。

我會接受一個解決方案的答案，但如果有人給jQuery解決方案，我會採取重要的信息，我真的很感謝。

非常感謝。

來源

2016-10-04 Mik

這是一個使用核心Javascript的解決方案。它通過附加一個事件監聽器到<select>輸入，然後運行一個函數來設置隱藏的<input>的值。

要定位隱藏的<input>，我們可以使用document.getElementsByName並使用名稱input_name[]。如果您的名稱超過1個，您需要將inputHidden[0].value = newValue;中的方括號中的索引更改爲正確的索引。在這種情況下，由於有一個名稱爲input_hidden[]的元素，我們使用索引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>

來源

2016-10-04 08:09:19

@Miguel - 你有多個選擇？在你的例子中你選擇有一個'ID'，其他選擇有ID嗎？還是上課？ –

是一個。在我的示例中，值1,2,3,4應添加到隱藏的「input_name []」輸入中。 @BrettDeWoody – Mik

是的，這就是我的代碼示例。如果你檢查這個例子，當你改變Select時更新隱藏輸入的值。 –

這裏是一個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>

來源

2016-10-04 16:04:07

增加值與輸入類似「input_name []」上變化多用JavaScript

回答

相關問題