仅从具有多个属性的 HTML 选择中获取新添加和删除的选项？

Posted 2023-05-09

【中文标题】仅从具有多个属性的 HTML 选择中获取新添加和删除的选项？

【英文标题】：Get only newly added and removed option from HTML select with multiple attribute?

【发布时间】：2014-07-24 17:33:57

【问题描述】：

我的问题看起来很简单，但我想不通。

Fiddle Demo

html：

<select multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

jQuery:

var choiceArr = [];
$('select').change(function () 
    var text = $(this).find('option:selected').text();
    choiceArr.push(text);
    console.log(choiceArr);
);

所以目前，如果我选择 Volvo 和 Saab，结果将是：

["Volvo", "VolvoSaab"]

我的预期结果是：

["Volvo", "Saab"]

当我从选择中删除 Saab 时，结果将是：

["Volvo", "VolvoSaab", "Volvo"] 

我的预期结果是：

["Volvo"]

那么我该如何实现呢？

【问题讨论】：

你的小提琴链接坏了......好吧，不存在。

【参考方案1】：

Demo

试试

var choiceArr = [];
$('select').change(function () 

    choiceArr = $(this).find('option:selected').map(function () 
        return $(this).text();
    ).get();

    alert(choiceArr);
);

【参考方案2】：

试试这个

<select multiple="multiple" id="select1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
<label id="result"></label>

Js

$('select').change(function () 
    var selValues = $.map($("#select1 option:selected"), function (temp) 
         return $(temp).text();
     );
     $("#result").text(selValues.join(", "));
);

Fiddle