Check multiple selected options, if found value show Div-CodePudding

I have a group in a select that if chosen it shows a Div.

It works great the problem is that I have several other selects with the same options and groups.

And if you choose the group that shows the div, and then you pick a group that don't this one hides again.

Selects are created dynamically so you can create or delete the rows, if you delete a row where you created a select and chose and option of the group that shows div, then u will see div even if there's no select with the option to show the div.

Anyway of checking the options selected to show or not show div? I wanna show the div if at least one of the group "Unique" option is selected. And if it checks and theres no option of that group, then hide.

 function doSomething(element) {
  // get optgroup
  let optgroup = element.options[element.options.selectedIndex].closest('optgroup').getAttribute('label')
  console.log(optgroup)
  if (optgroup == 'Unique') {
    $("#extras").show()
  } else {
    $("#extras").hide()
  }
}

.extras {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <table>
    <tr>
      <td><input  type="email" name="mail[]" required />
      </td>
      <td>
        <select  name="skills[]" onchange='doSomething(this)' required>
          <option  value=""></option>
          <optgroup Class="unique" label="Common">
            <option value="Extraction">Extraction</option>
            <option value="Hunting">Hunting</option>
            <option value="Farming">Farming</option>
          </optgroup>
          <optgroup  label="Unique">
            <option value="Diplomacy">Diplomacy</option>
            <option value="Survival">Survival</option>
          </optgroup>
        </select>
      </td>
      <td>
    </tr>
    <tr>
      <td><input  type="email" name="mail[]" required />
      </td>
      <td>
        <select  name="skills[]" onchange='doSomething(this)' required>
          <option  value=""></option>
          <optgroup Class="unique" label="Common">
            <option value="Extraction">Extraction</option>
            <option value="Hunting">Hunting</option>
            <option value="Farming">Farming</option>
          </optgroup>
          <optgroup  label="Unique">
            <option value="Diplomacy">Diplomacy</option>
            <option value="Survival">Survival</option>
          </optgroup>
        </select>
      </td>
      <td>
    </tr>
    <tr>
      <td><input  type="email" name="mail[]" required />
      </td>
      <td>
        <select  name="skills[]" onchange='doSomething(this)' required>
          <option  value=""></option>
          <optgroup Class="unique" label="Common">
            <option value="Extraction">Extraction</option>
            <option value="Hunting">Hunting</option>
            <option value="Farming">Farming</option>
          </optgroup>
          <optgroup  label="Unique">
            <option value="Diplomacy">Diplomacy</option>
            <option value="Survival">Survival</option>
          </optgroup>
        </select>
      </td>
      <td>
    </tr>
  </table>
</div>

<div  id="extras">
  <h4 >Check</h4>
  Increased through making items, sewing and cooking.<br>
  <input  type="checkbox" name="checkpoint" checked required/>
</div>

CodePudding user response：

If you set this up as event delegates it will be easier to manage and consolidate your code. Set up a listener to react to the select menus - I have set it up on the table so that you can create new select menus inside the table and they'll inherit the listener.

Then, just check all selects to see if they are using the target optgroup to turn on or off the div.

Some other notes:

I gave your select menu's identifiable classes as to be easier to select with jQuery
I make all your code jQuery, where is was half and half before.
You can use toggle() rather than show/hide and just provide a boolean for the argument. A true means show(), flase means hide()
I set up a delete button to show how it can integrate with this flow

$('.skillTable').on('change', ".skillSelect", function() {
  checkExtras()
})

$('.delete').click(function() {
  $(this).closest('tr').remove();
  checkExtras();
})

function checkExtras() {
  let hasExtras = false;
  $(".skillSelect").each(function(i, o) {
    let optgroup = $(o).find(':checked').closest('optgroup').attr('label');
    if (optgroup === 'Unique') hasExtras = true;
  })
  $("#extras").toggle(hasExtras)
}

.extras {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <table class='skillTable'>
    <tr>
      <td><input  type="email" name="mail[]" required />
      </td>
      <td>
        <select  name="skills[]" required>
          <option  value=""></option>
          <optgroup Class="unique" label="Common">
            <option value="Extraction">Extraction</option>
            <option value="Hunting">Hunting</option>
            <option value="Farming">Farming</option>
          </optgroup>
          <optgroup  label="Unique">
            <option value="Diplomacy">Diplomacy</option>
            <option value="Survival">Survival</option>
          </optgroup>
        </select> <button class='delete'>delete</button>
      </td>
      <td>
    </tr>
    <tr>
      <td><input  type="email" name="mail[]" required />
      </td>
      <td>
        <select  name="skills[]" required>
          <option  value=""></option>
          <optgroup Class="unique" label="Common">
            <option value="Extraction">Extraction</option>
            <option value="Hunting">Hunting</option>
            <option value="Farming">Farming</option>
          </optgroup>
          <optgroup  label="Unique">
            <option value="Diplomacy">Diplomacy</option>
            <option value="Survival">Survival</option>
          </optgroup>
        </select> <button class='delete'>delete</button>

      </td>
      <td>
    </tr>
    <tr>
      <td><input  type="email" name="mail[]" required />
      </td>
      <td>
        <select  name="skills[]" required>
          <option  value=""></option>
          <optgroup Class="unique" label="Common">
            <option value="Extraction">Extraction</option>
            <option value="Hunting">Hunting</option>
            <option value="Farming">Farming</option>
          </optgroup>
          <optgroup  label="Unique">
            <option value="Diplomacy">Diplomacy</option>
            <option value="Survival">Survival</option>
          </optgroup>
        </select>
        <button class='delete'>delete</button>
      </td>
      <td>
    </tr>
  </table>
</div>

<div  id="extras">
  <h4 >Check</h4>
  Increased through making items, sewing and cooking.<br>
  <input  type="checkbox" name="checkpoint" checked required/>
</div>