从多个选择框中获取最后更改的选项元素[重复]答案

【问题标题】：Get last changed option element from multiple select box [duplicate]从多个选择框中获取最后更改的选项元素[重复]
【发布时间】：2018-07-06 04:22:53
【问题描述】：

我需要使用 jQuery 或跨浏览器原生 js 代码的多选框中最后一个 (1) 更改的选项元素。

(1)last = time not order！

<form id="form-with-msb">
    <select multiple id="multiple-select-box">
        <option value="all">All</option>
        <option value="1">xxx</option>
        <option value="2">yyy</option>
        <option value="3">zzz</option>
    </select>
</form>

$( "#form-with-msb" ).on( "change", "#multiple-select-box", function() {
  // get last changed option element from multiple select box
});

【问题讨论】：

你说的“时间不是顺序”是什么意思？在用户选择另一个选项之前选择的最后一个选项？
@Patrick Evans：是的，是最后一个被选中的选项（而不是按所选选项元素顺序排列的最后一个元素）。
这有帮助吗？ stackoverflow.com/questions/8149532/…
@npearson：选项点击事件的解决方案对我不起作用。

标签： javascript jquery html forms event-handling

【解决方案1】：

您可以使用data 属性来存储之前选择的选项。

即：

<select data-last='' ...>...</select>

每个onChange 调用都会将选定的选项存储到data 属性中。

$("#form-with-msb").on("change", "#multiple-select-box", function() {
  var last = $(this).data('last');
  console.log(last.split(','));

  var selected = [];
  $(this).children(':selected').each(function(idx, opt) {
    selected.push($(opt).text());
  });
  $(this).data('last', selected.join(','));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form-with-msb">
  <select data-last='' multiple id="multiple-select-box">
        <option value="all">All</option>
        <option value="1">xxx</option>
        <option value="2">yyy</option>
        <option value="3">zzz</option>
    </select>
</form>

【讨论】：

感谢您的解决方案。将数据保存在“最后数据”中是个好主意。我已将“this”更改为“event.currentTarget”并添加了数据差异功能。

【解决方案2】：

您可以定义一个数组对象来记录用户执行的所有操作。然后获取数组对象的最后一个作为最后的更改。甚至你可以通过这种机制实现重做/撤消功能。

var G_ACTION_CACHE = []
$( "#form-with-msb" ).on( "change", "#multiple-select-box", function() {
  // get last changed option element from multiple select box
  if(G_ACTION_CACHE.length===0){
    console.log("NO ACTION BEFORE");
  }
  else{
    console.log(G_ACTION_CACHE[G_ACTION_CACHE.length-1]);
  }
  var current_actions = [];
  $.each($( "#form-with-msb" ).find("option:selected"), function(index, item) {
    current_actions.push({'ID':index, 'VALUE':$(item).text()});
  });
  G_ACTION_CACHE.push(current_actions);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form-with-msb">
    <select multiple id="multiple-select-box">
        <option value="all">All</option>
        <option value="1">xxx</option>
        <option value="2">yyy</option>
        <option value="3">zzz</option>
    </select>
</form>

【讨论】：

这真的行不通。如果您进行多项选择，它会注销诸如“xxxyyyzzz”之类的内容
更不用说当$(this).val() 为您提供一个选定值的数组时，您无需费心查找所有选定的选项。
选择值的存储和比较是唯一的解决方案吗？无法访问活动？
抱歉，更新了我的代码以支持多选。