hinzufügen Werte an einen Eingang wie „input_name []“ bei Änderung mit Javascript wählen Sie mehr

Question

Dies ist ein versteckter Eingang Ich habe ...

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

Ich mag würde Werte an diesen Eingang, sobald ich hinzufügen „OnChange“ Mehrfach-Auswahl-Optionen wie:

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

Der Ort, wo die JavaScript-o selbst setzen, wenn eine Funktion ist, für mich irrelevant.

Ich würde eine Antwort für Javascript-Lösung akzeptieren, aber wenn jemand eine Jquery-Lösung geben würde, würde ich so wichtige Informationen nehmen, und ich würde wirklich das danken.

Vielen Dank.

Answer 1

Hier ist eine Lösung mit Core-Javascript. Dazu wird ein Ereignis-Listener an den <select>-Eingang angehängt und dann eine Funktion ausgeführt, um den Wert des ausgeblendeten <input> festzulegen.

Um die versteckten <input> zu zielen, können wir document.getElementsByName verwenden und den Namen input_name[] verwenden. Wenn Sie mehr als ein Element mit diesem Namen haben, müssen Sie den Index in den eckigen Klammern in inputHidden[0].value = newValue; in den richtigen Index ändern. In diesem Fall verwenden wir den Index 0, da es ein Element mit dem Namen input_hidden[] gibt. Wenn es zwei Elemente waren, und wollte man den Wert des zweiten einzustellen versteckt <input> würden Sie inputHidden[1].value = newValue; verwenden

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

Hier ist ein jQuery Beispiel:

$('#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>