Get every select that doesn't have something specific selected-CodePudding

I'm still learning CSS selectors, but for this small project I'm doing I need to select every dropdown that doesn't have "" as its value (the not selected option). Here is the select

<select  id="<%= sm.id %>" name="Department" value="point_department">
  <option value="" selected>Not selected</option>
  <optgroup label="Floor">
    <option value="10">Server (10 pts)</option>
    <option value="5">Busser (5 pts)</option>
    <option value="2">Food Runner(2 pts)</option>
  </optgroup>
  <optgroup label="Bar">
    <option value="3">Bartender(3 pts)</option>
    <option value="1.5">Bar-back(1.5 pts)</option>
  </optgroup>
</select>

I'd like to select every select that doesn't have the not selected option selected, and get the values of them, to process them, not style them. Thanks for the help in advance.

CodePudding user response：

You can filter and map using JavaScript

const container = document.getElementById("container");
const sels = container.querySelectorAll("select");
container.addEventListener("change", function() {
  const filled = [...sels]
    .filter(sel => sel.value != "")
    .map(sel => sel.id)
  console.log(filled)
})

<div id="container">
<select  id="id1" name="Department" value="point_department">
  <option value="" selected>Not selected</option>
  <optgroup label="Floor">
    <option value="10">Server (10 pts)</option>
    <option value="5">Busser (5 pts)</option>
    <option value="2">Food Runner(2 pts)</option>
  </optgroup>
  <optgroup label="Bar">
    <option value="3">Bartender(3 pts)</option>
    <option value="1.5">Bar-back(1.5 pts)</option>
  </optgroup>
</select>
<select  id="id2" name="Department" value="point_department">
  <option value="" selected>Not selected</option>
  <optgroup label="Floor">
    <option value="10">Server (10 pts)</option>
    <option value="5">Busser (5 pts)</option>
    <option value="2">Food Runner(2 pts)</option>
  </optgroup>
  <optgroup label="Bar">
    <option value="3">Bartender(3 pts)</option>
    <option value="1.5">Bar-back(1.5 pts)</option>
  </optgroup>
</select>
</div>

jQuery version

$("#container").on("change", function() {
  const filled = $(this).find("select")
    .filter(function() { return this.value != "" })
    .map(function() { return this.id }).get()
  console.log(filled)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="container">
  <select  id="id1" name="Department" value="point_department">
    <option value="" selected>Not selected</option>
    <optgroup label="Floor">
      <option value="10">Server (10 pts)</option>
      <option value="5">Busser (5 pts)</option>
      <option value="2">Food Runner(2 pts)</option>
    </optgroup>
    <optgroup label="Bar">
      <option value="3">Bartender(3 pts)</option>
      <option value="1.5">Bar-back(1.5 pts)</option>
    </optgroup>
  </select>
  <select  id="id2" name="Department" value="point_department">
    <option value="" selected>Not selected</option>
    <optgroup label="Floor">
      <option value="10">Server (10 pts)</option>
      <option value="5">Busser (5 pts)</option>
      <option value="2">Food Runner(2 pts)</option>
    </optgroup>
    <optgroup label="Bar">
      <option value="3">Bartender(3 pts)</option>
      <option value="1.5">Bar-back(1.5 pts)</option>
    </optgroup>
  </select>
</div>

CodePudding user response：

Using a css selector

You specifically asked about css selectors. You could do that by finding all the selects which have the pseudo class :checked and a value not equal to an empty string:

element.querySelectorAll("select option:checked:not([value=''])")

Try the snippet below to see how it works. Note that the pseudo class :checked applies to <option selected> too and not only check boxes. Anyway, this allows you to grab all the elements with a single querySelectorAll() without resorting to jQuery, loops, or array filtering.

group.addEventListener("change", function(e) {
  
  var list = this.querySelectorAll("select option:checked:not([value=''])");
    
  console.log("Selected Items: "   list.length );
  
  // do something with list

});

<div id="group">
<select  id="<%= sm.id %>" name="Department" value="point_department">
  <option value="" selected>Not selected</option>
  <optgroup label="Floor">
    <option value="10">Server (10 pts)</option>
    <option value="5">Busser (5 pts)</option>
    <option value="2">Food Runner(2 pts)</option>
  </optgroup>
  <optgroup label="Bar">
    <option value="3">Bartender(3 pts)</option>
    <option value="1.5">Bar-back(1.5 pts)</option>
  </optgroup>
</select>
<select  id="<%= sm.id %>" name="Department" value="point_department">
  <option value="" selected>Not selected</option>
  <optgroup label="Floor">
    <option value="10">Server (10 pts)</option>
    <option value="5">Busser (5 pts)</option>
    <option value="2">Food Runner(2 pts)</option>
  </optgroup>
  <optgroup label="Bar">
    <option value="3">Bartender(3 pts)</option>
    <option value="1.5">Bar-back(1.5 pts)</option>
  </optgroup>
</select>
<select  id="<%= sm.id %>" name="Department" value="point_department">
  <option value="" selected>Not selected</option>
  <optgroup label="Floor">
    <option value="10">Server (10 pts)</option>
    <option value="5">Busser (5 pts)</option>
    <option value="2">Food Runner(2 pts)</option>
  </optgroup>
  <optgroup label="Bar">
    <option value="3">Bartender(3 pts)</option>
    <option value="1.5">Bar-back(1.5 pts)</option>
  </optgroup>
</select>
</div>