Javascript 返回带有 Form Optgroup parent 的值

Question

我想 return 将选项值 select 编辑到多个选项 select 框中它可以工作，我没有 optgroup 标签。一旦我添加这些标签，我就无法获得子值。我敢肯定这是一个棘手的问题，但我找不到正确的语法来获取正确的数组，即 dropdown.options

$('#mydropdown option').click(function(evt) {
  var selectedOption = evt.target;
  var dropdown = this.parentNode;
  queue.add(selectedOption.value);
  Array.from(dropdown.options).forEach(function(option) {
    if (!option.selected) {
      queue.remove(option.value);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<select id="mydropdown" multiple="multiple">
  <optgroup label="Group 1">
    <option value="optionx Fruits" selected>Fruits</option>
    <option value="optionx Vegetables">Vegetables</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="optionx Nuts">Nuts</option>
    <option value="optionx Meats">Meats</option>
  </optgroup>

</select>

Answer 1

单击您的父节点成为 optgroup

var dropdown = this.parentNode;

所以你应该设置

var dropdown = this.parentNode.parentNode;

Answer 2

我们每次都可以创建一个新集合

如果您希望集合只包含选定的内容，这很重要。

如果您希望集合包含用户选择的内容并在用户取消选择时保留它，那么只需添加

另请注意，我在加载时触发更改以初始化集合

let queue;
$('#mydropdown').on("change", function(evt) {
  queue = new Set();
  $("option:selected",this).each(function() { queue.add(this.value) });
  console.log("changed -------")
  for (const item of queue) console.log(item)
}).change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<select id="mydropdown" multiple="multiple">
  <optgroup label="Group 1">
    <option value="optionx Fruits" selected>Fruits</option>
    <option value="optionx Vegetables">Vegetables</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="optionx Nuts">Nuts</option>
    <option value="optionx Meats">Meats</option>
  </optgroup>

</select>

如果你想保持选中的顺序，你确实需要添加然后删除

let queue = new Set();

$('#mydropdown').on("click", function(evt) {
  $(this).find("option").each(function() {
    queue.add(this.value); 
    if (!this.selected) queue.delete(this.value)
  })
  console.log("changed -------")
  for (const item of queue) console.log(item)
}).click();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<select id="mydropdown" multiple="multiple">
  <optgroup label="Group 1">
    <option value="optionx Fruits" selected>Fruits</option>
    <option value="optionx Vegetables">Vegetables</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="optionx Nuts">Nuts</option>
    <option value="optionx Meats">Meats</option>
  </optgroup>

</select>

Javascript 返回带有 Form Optgroup parent 的值

Javascript Returning values with Form Optgroup parent

html

javascript

queue

option

optgroup