querySelectorAll - Multiple IDs to hide option in two different dropdown menus

Question

I have two dropdown menus in the same page with two different Ids, and when the option "No" is selected on each one, I'd like them to hide a <div>

I've been trying to make work the function document.querySelectorAll("#Id1, #Id2); but obviously I'm doing something wrong.

This is what I got so far:

document.querySelectorAll("#419177, #531703").addEventListener('change', function () {
var style = this.value == 'Sí' ? 'block' : 'none';
var style = this.value == 'Ok' ? 'block' : 'none';
var list = document.getElementsByClassName('option_type_419180') [0].style.display = style;
var list = document.getElementsByClassName('option_type_531704') [0].style.display = style;
});

<select id="419177" name="properties[Customize 1?]"><option value="">  Customize 1?--</option><option value="Sí">Sí</option><option value="No">No</option></select>

<div class="option_type_419180" data-parent-id="419180">
Available colors </div>

<hr>

<select id="531703" name="properties[Customize 2?]"><option value="">  Customize 2?--</option><option value="Ok">Ok</option><option value="No">No</option></select>

<div class="option_type_531704" data-parent-id="419180">
Available colors 2</div>

why the jQuery tag? I see none – j08691 Aug 04 '21 at 18:42 — j08691, Aug 04 '21 at 18:42
Can you give them a common class and then target the class? – Rob Moll Aug 04 '21 at 18:45 — Rob Moll, Aug 04 '21 at 18:45

Daniil Loban · Answer 1 · 2021-08-04T20:52:09.297

First of all, id must start with a letter. As for the handler, since this is not JQuery, you need to walk through the array (Array.from, forEach). I'm not sure if this is the best solution, maybe it was worth doing event handling through delegation.

Also, be careful, overwriting the style value may cause unexpected effects - you need to consider the previous state. For example, I want something to happen if the number n is 3 or 5

var n = 3;
var doit = n === 3? 'yes': 'no'; // 'yes'
var doit = n === 5? 'yes': 'no'; // 'no'

only the last result will always be taken into account.

to take both into account, you need to change the code like this:

var n = 3;
var doit = n === 3 ? 'yes': 'no'; // if doit is 'yes'
var doit = (doit === 'yes' || n === 5) ? 'yes': 'no'; // it's still 'yes'

 Array.from(document.querySelectorAll("#s419177, #s531703"))
  .forEach(select => {
 select.addEventListener('change', function () {
 var style = this.value == 'Sí' ? 'block' : 'none';
 var style = this.value == 'Ok' ? 'block' : 'none';
 var list = document.getElementsByClassName('option_type_419180') [0].style.display = style;
 var list = document.getElementsByClassName('option_type_531704') [0].style.display = style;
  })
});

  <select id="s419177" name="properties[Customize 1?]">
  <option value="">  Customize 1?--</option>
  <option value="Sí">Sí</option>
  <option value="No">No</option>
</select>
<div class="option_type_419180" data-parent-id="419180">
  Available colors
</div>
<hr>
<select id="s531703" name="properties[Customize 2?]">
  <option value="">  Customize 2?--</option>
  <option value="Ok">Ok</option>
  <option value="No">No</option>
</select>
<div class="option_type_531704" data-parent-id="419180">
  Available colors 2
</div>

With delegation (This code is more versatile, you can add as many selections as you like, including at runtime.)

document.getElementById("selectors")
  .addEventListener('change', function (e) {
   var style = ['Sí', 'Ok'].includes(e.target.value) ? 'block' : 'none';
   el = e.target.nextElementSibling; // get DIV
   el.style.display = style;
})

<section id="selectors">
  <select id="s419177" name="properties[Customize 1?]">
    <option value="">  Customize 1?--</option>
    <option value="Sí">Sí</option>
    <option value="No">No</option>
  </select>
  <div class="option_type_419180" data-parent-id="419180">
  Available colors
  </div>
  <hr>
  <select id="s531703" name="properties[Customize 2?]">
    <option value="">  Customize 2?--</option>
    <option value="Ok">Ok</option>
    <option value="No">No</option>
  </select>
  <div class="option_type_531704" data-parent-id="419180">
  Available colors 2
  </div>
</section>

Thank you! I didn't know that rule that the ID must begin with a letter. It was very helpful. — Topiz, Aug 04 '21 at 19:58
@Topiz, not at all, despite the fact that you chose a different answer, I think the content of my answer will be useful to you. good luck! — Daniil Loban, Aug 04 '21 at 20:50

score 0 · Answer 2 · answered Aug 04 '21 at 18:55

try this code:

  document.querySelectorAll("#a419177, #a531703").forEach(item => {
    item.addEventListener('change', event => {
      let display = 'none';
      if (event.target.value === 'Sí' || event.target.value === 'Ok') {
        display = 'block';
      }
      document.getElementsByClassName('option_type_419180')[0].style.display = display;
      document.getElementsByClassName('option_type_531704')[0].style.display = display;
    })
  })

<select id="a419177" name="properties[Customize 1?]">
  <option value=""> Customize 1?--</option>
  <option value="Sí">Sí</option>
  <option value="No">No</option>
</select>

<div class="option_type_419180" data-parent-id="419180">
  Available colors </div>

<hr>

<select id="a531703" name="properties[Customize 2?]">
  <option value=""> Customize 2?--</option>
  <option value="Ok">Ok</option>
  <option value="No">No</option>
</select>

<div class="option_type_531704" data-parent-id="419180">
  Available colors 2</div>

note: id attribute must start with the alphabet;

Steve · Answer 3 · 2021-08-04T19:11:54.887

The first problem is that you cannot have an element id begin with a number.

Second, when using document.querySelectorAll() you need to iterate over each the nodes one at a time with the .forEach() method.

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll#accessing_the_matches

document.querySelectorAll("#_419177, #_531703").forEach(element => {
  element.addEventListener('change', event => {
    console.log(event.target.value)
  });
});

<select id="_419177" name="properties[Customize 1?]">
  <option value=""> Customize 1?--</option>
  <option value="Sí">Sí</option>
  <option value="No">No</option>
</select>

<div class="option_type_419180" data-parent-id="419180">
  Available colors </div>

<hr>

<select id="_531703" name="properties[Customize 2?]">
  <option value=""> Customize 2?--</option>
  <option value="Ok">Ok</option>
  <option value="No">No</option>
</select>

<div class="option_type_531704" data-parent-id="419180">
  Available colors 2</div>

score 0 · Answer 4 · answered Aug 04 '21 at 19:15

0

This is kind of a tricky one as the requirements for id attribute are very different between HTML 4 and HTML 5. This answer explains it very well

answered Aug 04 '21 at 19:15

Vini

8,299
11
37
49

score 0 · Accepted Answer · answered Aug 04 '21 at 19:19

The issue is because the first character of an identifier is numeric, see more info in this post:

More info about first character of an identifier numeric

Also you need to addEventListener to each element individually.

Tip: Assign the result to document.querySelectorAll to a const or var or let, helps you to debugging the code, because you could place breakpoints and see it they have the right values.

  <script>
const selects = document.querySelectorAll("[id='419177'], [id='531703']")  
selects.forEach(select => {
    select.addEventListener('change', function () {
    var style = this.value == 'Sí' ? 'block' : 'none';
    var style = this.value == 'Ok' ? 'block' : 'none';
    var list = document.getElementsByClassName('option_type_419180')[0].style.display = style;
    var list = document.getElementsByClassName('option_type_531704')[0].style.display = style;
 });

})
</script>

Thank you, thank you, @ManuelMB !! Since I couldn't change the ID by adding a letter in the start, this was the way to go for me. Thanks for the tip, also! — Topiz, Aug 04 '21 at 19:57

querySelectorAll - Multiple IDs to hide option in two different dropdown menus

5 Answers5