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

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;
}); ​

在这里尝试一下，当你调用 .val() 时 在 上，它返回其所选元素的值的数组。我们只是简单地存储它，当选择更改时，如果新值位于旧值数组中（$.inArray(val, arr) == -1 如果没有找到）那么这就是新值。之后，我们只需使用 attribute-equals 选择器 来获取元素并获取其 .text()。

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

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

Answer 2

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

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

Answer 3

var val = ''
$('#mySelect').change(function() {
   newVal = $('#mySelect option:selected').text();
   val += newVal;
   alert(val); # you need this.
   val = newVal;
});

或者让我们再玩点

val = ''; 
$('#id_timezone')
  .focus(
    function(){
        val = $('#id_timezone option:selected').text();
    })
  .change(
    function(){
        alert(val+$('#id_timezone option:selected').text())
    });

干杯吧。