Javascript Returning values with Form Optgroup parent-CodePudding

I would like to return the option values selected in a multiple option select box It works it I do not have a optgroup tags in. As soon as I add in the these tags, I cannot get the child values. I am sure this is a noddy question but I cannot find the correct syntax to get the correct array which is 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>

CodePudding user response：

On click your parentnode becomes optgroup

var dropdown = this.parentNode;

so you should set

var dropdown = this.parentNode.parentNode;

CodePudding user response：

See how here

I commented out the more complicated version since we can just create a new set each time

let queue;
$('#mydropdown').on("change", function(evt) {

/*  queue.add(evt.currentTarget.value);  
  $("option", this).each(function() {
    if (!this.selected) {
      queue.delete(this.value);
    }
  });
  */
  queue = new Set();
  $("option:selected",this).each(function() { queue.add(this.value) })
  for (const item of queue) console.log(item)
});

<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>

CodePudding user response：

I came up with basically the same thing as @mplungjan with a couple of subtle differences:

const queue = new Set();
$('#mydropdown option').click(function() {
  let selectedOption = $(this).val();
  queue.add(`${selectedOption}`);
  for (const item of queue) {
    console.log(item);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/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>