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它应该是{{1} }}。但是当我开始在底部选择时，结果是正常的s1s2s3。

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

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

Answer 1

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

所以当你这样做时

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

选择自上而下的选项s1始终是第一个遇到的选项，以及为什么会有s1s1s1

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

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

演示

＆＃13;

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

＆＃13;

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

＆＃13;

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

以下是您的代码，重做，在小提琴中：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()迭代每个选定的值。在它抓住第一个选定的值之前。这就是为什么当你从上到下时，它总是说＆＃34; s1＆＃34;因为＆＃34; s1＆＃34;永远是第一个。相反，当你自下而上时，第一个选择发生了变化。＆＃34; S3＆＃34; - ＆GT; ＆＃34; S2＆＃34; - ＆GT; ＆＃34; S1＆＃34;

Answer 4

当您使用$(".sysem option:selected")时，您会在<select>元素的多个选择中获得第一个所选元素的值。为了获得元素的值，您只需要$(".sysem").val()，这将以自上而下的方式返回所选元素的数组。

虽然问题在于多项选择，但您想要的项目并不明显。因为看起来你只是想要最近点击的项目;您可能希望单击选项元素上的事件并获取其值：

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

Answer 5

您的选择器为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>

使用jquery获取所选选项的值

5 个答案: