带有Form Optgroup父级的Javascript返回值

Question

我想返回在多选项选择框中选择的选项值 它可以工作，我没有 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

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

如果您希望集合仅包含选定的集合，这一点很重要。

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

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

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>

Answer 2

点击你的父节点变成 optgroup

var dropdown = this.parentNode;

所以你应该设置

var dropdown = this.parentNode.parentNode;