получает значение выбранных опций с помощью JQuery

Question

это мой JQuery

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

    }); 
}); 

и это мой HTML код

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

теперь моя проблема, когда я выбираю sample1 тогда я держать Ctrl button так, чтобы я могу выбрать другую опцию, а затем я выбираю Sample2, результат в текстовом поле s1s1s1 должен быть s1s2s3. Но когда я начну выбирать внизу, результат будет s3s2s1.

Казалось, что когда я начала выбора в верхней части к нижней части результат становится redundunt и если я начать выбор на снизу вверх результат хорошо ...

может кто-нибудь помочь мне ... им новичку в программировании ..

Answer 1

Ваш селектор select вместо option, поэтому вы получаете всегда первое :selected значение.

Попробуйте вместо

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

Если вы хотите получить только выбранные из них:

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

Это предупредит каждого выбранного значения

$(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() и аналогичные методы, которые должны возвращать что-то о элементе, например значение или значение атрибута, возвращают только данные из первого элемента, который соответствует.

Так что, когда вы делаете

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

И выберите опции сверху вниз s1 всегда будет первым столкнулся, и почему вы получили s1s1s1

Если вы хотите, чтобы все значения, кратного select element просто вызовите .val() на самом элементе select. Она возвращает массив всех выбранных значений

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

Вот ваш код, переделанный в скрипкой: 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(); 
     }); 
    }); 
}); 

Пояснение: Вам необходимо пройти через каждое выбранное значение, используя .each(). Прежде чем он захватил первое выбранное значение. Вот почему, когда вы шли сверху вниз, он всегда говорил «s1», потому что «s1» всегда был первым. Напротив, когда вы вышли на первое место, первое выбранное изменилось. "s3" -> "s2" -> "s1".

Answer 5

При использовании $(".sysem option:selected") вы получаете значение первого выбранного элемента в MULIT отбора на <select> элемента. Чтобы получить значение элемента, вам нужно только сделать $(".sysem").val(), это вернет массив выбранных элементов сверху вниз.

Хотя проблема заключается в множественном выборе, неясно, какой элемент вы хотите. Поскольку кажется, что вы просто хотите получить последний клик; вы можете иметь нажатия кнопки события на опционных элементов и получить их значение вместо:

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