javascript - 使用 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 textarea 中的结果是 s1s1s1应该是s1s2s3 .但是当我开始在底部选择时，结果还可以 s3s2s1 .

似乎当我开始从上到下选择时，结果变得多余，如果我从下到上开始选择，结果就可以了...

任何人都可以帮助我...我是编程新手..

Answer 1

.val() 和类似的方法应该返回关于元素的一些东西，比如值或属性值，将只返回匹配的第一个元素的数据。

所以当你这样做的时候

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

然后选择自上而下的选项 s1 总是会遇到第一个，为什么你得到 s1s1s1

如果您想要多选元素的所有值，只需对选择元素本身调用 .val()。它将返回所有选定值的数组

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

演示

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