jQuery多选更改事件无法按选择顺序获取选项值答案

【问题标题】：jQuery multiple select change event can't get option values in order of selectionjQuery多选更改事件无法按选择顺序获取选项值
【发布时间】：2021-04-01 02:00:31
【问题描述】：

我想在更改选择时隐藏输入中的多个选项（例如，我选择最后一个选项，然后选择第一个选项）我输入相同的顺序。

$('select').change(function() {
  var str = "";
  // For multiple choice
  $("select option:selected").each(function() {
    str = $(this).val() + str + " ";
  });
  alert(str);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="brands[]" class="chosen selectbrands fixed-width-xl" id="brands[]" multiple="multiple">
  <option value="1">BASTIEN test0</option>
  <option value="2">BASTIEN test1</option>
  <option value="3">BASTIEN test2</option>
</select>

现在如果我改变例如

(BASTIEN test1/BASTIEN test2/BASTIEN test0)

当我运行我的代码时，我得到了

(BASTIEN test0/BASTIEN test1/BASTIEN test2)

我的代码可以正常工作，但是当我选择最后一个然后是第二个时，这里的问题是当我选择第三个时它们不起作用并且我没有在我的 var 中获得我的选项的值

【问题讨论】：

请注意，您将使用 "select option:selected" 选择器获取页面上所有 select 元素的所有选定选项。你可能想要$(this).find("option:selected")。如果您提供运行此代码的 HTML 以便人们可以重现该问题，那就更好了。您可以使用 Stack Snippets（图标在编辑器工具栏中看起来像 <>）来生成可运行的 sn-p，如答案所示。
如果您添加您的html代码和所需的输出以使您的问题更清晰会更好
标准select multiple 不会记录您选择选项的order（我理解问题中相当混乱的措辞）。多选应该没关系。如果确实很重要，那么您应该使用不同的 UI 组件，例如列表选择器（两个列表并排，您可以在其中重新排序第二个列表） - 否则您会搞砸用户的 UX/预期操作。
我在我的代码中添加了一个示例，您可以检查一下！
是的，select multiple 就是这样工作的——如果你想要不同的东西，那就使用不同的组件。可能有一个 3rd 方包装器可以满足您的需求，但不太可能，因为它不是该组件的 UX。

标签： javascript jquery

【解决方案1】：

如果我理解正确，这可能会有所帮助：

使用点击事件直接定位选项并将它们按顺序保存在数组中。使用e.target.selected ?，您确保仅在选定时进行推送。 remove 如果取消选择，函数将从数组中删除元素。

var str = []
$('select#brands option').on("click", function(e) {
  let l = $(e.target).parent().find("option:selected").length
  console.clear()

  if (l > 1) {
    e.target.selected ? str.push(e.target.value) : remove(str, e.target.value);
  } else if (l === 1 && str.length != 2) {
    str = [e.target.value]
  } else if (l === 1 && str.length === 2) {
    remove(str, e.target.value)
  } else if (l === 0) {
    str = []
  }

  console.log(str)
});


function remove(str, item) {
  var index = str.indexOf(item);
  if (index !== -1) {
    str.splice(index, 1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="brands[]" class="chosen selectbrands fixed-width-xl" id="brands" multiple="multiple">
  <option value="1">BASTIEN test1</option>
  <option value="2">BASTIEN test2</option>
  <option value="3">BASTIEN test3</option>
  <option value="4">BASTIEN test4</option>
</select>

【讨论】：

是的，这正是我想要的，但点击问题在我的代码中不起作用！！为什么？
我不能告诉你，正如上面的代码 sn-p 所示，它可以工作。检查选择器是否正常。直接使用 select#brands option 定位它，顺便说一句，你的 id 中有 id="brands[]"，远程 [] 。 @Ahmedguesmi
@Ahmedguesmi 也使用你的 console.log 开发工具来检查错误或结果。
@Ahmedguesmi 已修复。现在它适用于单选和多选，并且取消选择工作正常。
@Ahmedguesmi 另外请注意，不要在生产中使用console.clear()，它会在此事件发生之前从控制台删除所有先前的通知。仅将其用于单独测试此功能的使用情况。

【解决方案2】：

像这样。当您从头开始选择时，选项数组将被重置。

    var str = "";
    $('select').change(function() {
    //alert($(this).find("option").length);
       if($(this).find("option").length < str.split(" ").length){
        str = "";
    }
      // For multiple choice
      str = $(this).find("option:selected").val() + str + " ";
      alert(str);

    });

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <select name="brands[]" class="chosen selectbrands fixed-width-xl" id="brands[]" multiple="multiple">
      <option value="1">BASTIEN test0</option>
      <option value="2">BASTIEN test1</option>
      <option value="3">BASTIEN test2</option>
    </select>

【讨论】：

哦，当您选择一个选项时，我已经完成了。我会尽量按照你的方式去做。