immer der Wert der ausgewählten Optionen mit Jquery

Question

das ist mein jquery

$(document).ready(function(){ 
    $("select.sysem").click(function(){ 
     var selectedvalue = $(".sysem option:selected").val(); 
     var hidden = document.getElementById('prens'); 
     hidden.value += selectedvalue; 

    }); 
}); 

und dies ist mein HTML-Code

<form method='post'> 
<select id='psy' class='sysem' name='psy' multiple='true' size='5'> 
<option value='s1'>Sample1</option> 
<option value='s2'>Sample2</option> 
<option value='s3'>Sample3</option> 
</select> 
<textarea id='prens' name='prens' coloumn='20' row='5'></textarea> 
</form> 

jetzt mein Problem ist, wenn ich Sample1 wählen dann halte ich die Ctrl button so dass Ich kann eine andere Option auswählen, und dann wähle ich Sample2 das Ergebnis in der Textarea ist s1s1s1 sollte es s1s2s3 sein. Aber wenn ich unten an der Auswahl anfange, ist das Ergebnis ok s3s2s1.

Es scheint das, dass, wenn ich an der von oben nach unten beginnen Auswahl das Ergebnis wird redundunt und wenn ich beginnen am unteren Rand der Auswahl das Ergebnis nach oben ok ist ...

mir jemand helfen kann ... im a Neuling in der Programmierung ..

Answer 1

Ihre Wähler ist select statt option, das ist, warum Sie immer die erste :selected Wert.

dieses Versuchen Sie stattdessen

$(document).ready(function(){ 
 
    $("select.sysem option").click(function(){ 
 
    var hidden = document.getElementById('prens'); 
 
    hidden.value += this.value; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method='post'> 
 
    <select id='psy' class='sysem' name='psy' multiple='true' size='5'> 
 
    <option value='s1'>Sample1</option> 
 
    <option value='s2'>Sample2</option> 
 
    <option value='s3'>Sample3</option> 
 
    </select> 
 
    <textarea id='prens' name='prens' coloumn='20' row='5'></textarea> 
 
</form>

Wenn Sie nur die ausgewählten erhalten möchten:

jQuery(function($){ // DOM ready 
 

 
    $("select.sysem").on("change", function(){ 
 
    var sel = $(":selected", this).map(function() { 
 
     return this.value; 
 
    }).get().join(); 
 
    $('#prens').val(sel); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method='post'> 
 
    <select id='psy' class='sysem' name='psy' multiple='true' size='5'> 
 
    <option value='s1'>Sample1</option> 
 
    <option value='s2'>Sample2</option> 
 
    <option value='s3'>Sample3</option> 
 
    </select> 
 
    <textarea id='prens' name='prens' coloumn='20' row='5'></textarea> 
 
</form>

Answer 2

Das jeweils ausgewählte Werte alarmiert

$(function() { 
 
    var arr = []; 
 
    $('#show').click(function() { 
 
     $('#multipleSelect :selected').each(function (i, selected) { 
 
      arr[i] = $(selected).text(); 
 
      alert(arr[i]); 
 
     }); 
 
    }); 
 
});

<select id="multipleSelect" multiple="multiple"> 
 
    <option value="1">Text 1</option> 
 
    <option value="2">Text 2</option> 
 
    <option value="3">Text 3</option> 
 
</select> 
 
<input type="button" id="show" value="Show values" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

.val() und ähnliche Methoden, die etwas über ein Element zurückgeben sollen, wie Wert oder Attributwert, geben nur die Daten des ersten übereinstimmenden Elements zurück. So

wenn Sie

tun

$(".sysem option:selected").val(); 

und wählen Sie oben die Optionen nach unten s1 ist immer der erste begegnet sein würde, und warum Sie bekam s1s1s1

Wenn Sie alle Werte eines multiplen Wählen Sie Element nur .val() auf dem Select-Element selbst aufrufen. Es wird ein Array aller ausgewählten Werte

var values = $(".sysem").val(); 
jQuery('#prens').val(values.join(",")); 

Demo

$(document).ready(function(){ 
 
    $("select.sysem").change(function(){ 
 
     var values = $(".sysem").val(); 
 
     $('#prens').val(values.join(",")); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method='post'> 
 
<select id='psy' class='sysem' name='psy' multiple='true' size='5'> 
 
<option value='s1'>Sample1</option> 
 
<option value='s2'>Sample2</option> 
 
<option value='s3'>Sample3</option> 
 
</select> 
 
<textarea id='prens' name='prens' coloumn='20' row='5'></textarea> 
 
</form>

Answer 4

Rückkehren hier ist der Code, nochmals gemacht, in einer Geige: https://jsfiddle.net/aau6aaL1/

JS:

$(document).ready(function(){ 
    $("select.sysem").click(function(){ 
     $('select.sysem :selected').each(function(i, selected){ 
      var hidden = document.getElementById('prens'); 
      console.log($(selected).text()); 
      hidden.value += $(selected).text(); 
     }); 
    }); 
}); 

Erläuterung: Sie mussten jeden ausgewählten Wert mit .each() durchlaufen. Bevor es den ersten ausgewählten Wert erfasst hat. Aus diesem Grund sagte man immer "s1", wenn "s1" immer der erste war. Umgekehrt, wenn Sie unten nach oben gegangen sind, wurde das zuerst ausgewählte geändert. "s3" -> "s2" -> "s1".

Answer 5

Wenn Sie $(".sysem option:selected") Sie bekommen den Wert des ersten ausgewählte Element in einer Mulit-Auswahl auf dem <select> Element. Um den Wert des Elements zu erhalten, das Sie nur $(".sysem").val() tun müssen, gibt dies ein Array der ausgewählten Elemente in einer Top-Down-Weise zurück.

Obwohl das Problem mit Mehrfachselektion ist, ist es nicht offensichtlich, welches Element Sie möchten. Da es scheint, dass Sie nur das zuletzt angeklickte Element möchten; Sie können Sie Ereigniselemente auf die Option klicken haben und ihren Wert erhalten statt:

$("select.sysem option").click(function(){ 
    var selectedvalue = $(this).val(); 
    var hidden = document.getElementById('prens'); 
    hidden.value += selectedvalue; 
});