Multi Select DropDown - 获取当前选择的选项答案

【问题标题】：Multi Select DropDown- Get current selected optionMulti Select DropDown - 获取当前选择的选项
【发布时间】：2016-03-14 15:50:50
【问题描述】：

我有一个多选，我想找出用户点击了哪个选项。我在网上搜索过，但没有得到任何体面的答案。我不想要所有选定选项的数组，只是用户点击的那个

例如

选项 A 选项 B 选项 C

如果会员点击选项A我想获得选项A，如果会员然后选择选项B，我想获得选项B，而不是选项A和B。

我已经看到他们说要使用点击事件的答案，但进一步的研究表明，如果有多个选项，点击事件不会触发，我必须在更改时使用。

之所以需要这个，是因为我们有以下需求

选项 A 选项 B 选项 C 选项无

如果成员选择A，然后是B，然后是None，我需要取消选择所有选项，并选择“None”。

如果选择了None，并且成员决定选择Option A，则需要取消选择None，并且需要选择Option A。

我能看到实现这一点的唯一方法是知道成员单击了哪个选项，如果没有，则取消全选，然后选择无，否则，如果选中，请确保没有取消选择。

【问题讨论】：

你能提供一个你尝试过的代码示例吗？
如果我设法获得当前选定的选项，这就是代码的样子。如果没有，取消全选并选择无，否则 { 取消选择无}
我在网上查过最接近的是下面的代码sn-p
$(document).ready(function(){ $("#mymulti").change(function () { var arr = $(this).val(); if (arr == null || arr.length === 0 || (arr.length > 1 && arr[0] === 'None')) { $(this).val(['None']); }
else { // 如果新选择包括空 ('None')，则取消选择任何其他活动选择 $.each(arr, function (index, value) { if (value == 'None') { var noneOnly = []; noneOnly.push('None'); return false; } }); } }); });

标签： jquery

【解决方案1】：

获取当前选择的选项（动态）：

$('#myselect').change(function() {
    alert($(this).val());
})

获取当前选择的选项（非动态）：

$('#myselect option:selected').val();

【讨论】：

谢谢 Greg，但我已经尝试过了，它提供了列表中选择的所有选项，我只想要我点击的那个。
选项A，选项B已经选择，然后我点击选项C，你的答案给了我选项A，选项B和选项C，我需要的是选项C

【解决方案2】：

这花了我一点点谷歌搜索来弄明白，因为我以前从来没有搞过多选，但这里是我想出的代码，它可以按照你想要的方式工作。它可能还有改进的空间，但我现在没有时间这样做。

var arr = [],
  index;

$("#mymulti").on('click', 'option', function() {
  if ($(this).is(':selected')) {
    arr.push($(this).val());
  } else {
    index = arr.indexOf($(this).val());

    if (index > -1) {
      arr.splice(index, 1);
    }
  }
  if (arr.length == 0) {
    $('#mymulti').val(['None']);
    arr.push('None');
  } else if (arr[0] === 'None' && arr.length > 1) {
    index = arr.indexOf('None');
    arr.splice(index, 1);

    $('#mymulti option[value="None"]').attr('selected', false);
  } else {
    $.each(arr, function(index, value) {
      if (value === 'None' && index > 0) {
        $("#mymulti option").attr('selected', false);
        $('#mymulti option[value="None"]').attr('selected', true);
        arr = ['None'];
      }
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mymulti" multiple="multiple">
  <option value="1">Option A</option>
  <option value="2">Option B</option>
  <option value="3">Option C</option>
  <option value="None">None</option>
</select>

【讨论】：

感谢 Diddle 的回复，但点击事件没有触发，我认为对于多选项，您需要使用我在网上查看的更改，我得到相同的答案“点击多选项不在许多浏览器上工作
什么浏览器不能启动？我已经检查了 chrome、safari 和 firefox，它们都适用。
这对我来说很奇怪，由于某种原因，点击事件被抑制了，我应该提到它我正在使用 Silvio Morettos 引导多选。我去了他的网站，找到了相关的事件来获得我想要的东西，我在下面发布了答案。

【解决方案3】：

我使用的多重选择是 silvio moretto 的 bootstrap-select

由于某种原因，它抑制了 on-click 事件的触发。

我去了他的网站，发现了以下事件

$('#myMulti').on('changed.bs.select', function (evt, clickedIndex) { 第二个参数给了我当前选择的索引，这是我需要的

https://silviomoreto.github.io/bootstrap-select/options/#events

【讨论】：

【解决方案4】：

$("#mymulti").on('change', function(e) {
  e.currentTarget.value //should return you the currently selected option
});

【讨论】：