Question

我有一个HTML选择列表，可以有多个选择：

<select id="mySelect" name="myList" multiple="multiple" size="3">
   <option value="1">First</option>
   <option value="2">Second</option>
   <option value="3">Third</option> `
   <option value="4">Fourth</option> 
   ...
</select>

我希望每次选择时都会获得一个选项的文本。我使用jQuery来做到这一点：

$('#mySelect').change(function() {
   alert($('#mySelect option:selected').text());
});

看起来很简单，但是如果选择列表已经有一些选定的选项 - 它也会返回它们的文本。例如，如果我已经选择了“第二”选项，在选择“第四”之后，警报会给我带来这个 - “SecondFourth”。那么有没有简单的jQuery方法来获取“当前”所选选项的文本，还是必须使用字符串并过滤新文本？

Answer 1

你可以这样做，保留旧值数组并检查那里没有新数组，如下所示：

var val;
$('#mySelect').change(function() {
 var newVal = $(this).val();
 for(var i=0; i<newVal.length; i++) {
     if($.inArray(newVal[i], val) == -1)
       alert($(this).find('option[value="' + newVal[i] + '"]').text());
 }
 val = newVal;
});

Give it a try here，当您在<select multiple>上致电.val()时，会返回其所选<option>元素值的数组。我们只是存储它，当选择发生变化时，循环遍历新值，如果新值在旧值数组中（$.inArray(val, arr) == -1，如果没有找到）那么这就是新值。在那之后，我们只是使用attribute-equals selector来获取元素并获取其.text()。

如果value=""可能包含会干扰选择器的引号或其他特殊字符，请改用.filter()，如下所示：

$(this).children().filter(function() {
  return this.value == newVal[i];
}).text());

Answer 2

在选项上设置onClick而不是select：

$('#mySelect option').click(function() {
    if ($(this).attr('selected')) {
        alert($(this).val());
    }
});

从多个选择列表中获取“最新”选定选项的文本

2 个答案: