querySelectorAll - 多个 ID 以隐藏两个不同下拉菜单中的选项

Question

我在同一页面中有两个下拉菜单，它们有两个不同的 ID，当在每个菜单上选择“否”选项时，我希望它们隐藏一个 <div>

我一直在尝试使函数工作 document.querySelectorAll("#Id1, #Id2); 但显然我做错了。

这是我目前得到的：

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>

Answer 1

首先，id必须以字母开头。至于handler，因为这不是JQuery，所以需要遍历数组（Array.from，forEach）。我不确定这是否是最好的解决方案，也许值得通过委托来处理事件。

此外，请注意，覆盖 style 值可能会导致意想不到的效果 - 您需要考虑之前的状态。例如，如果数字 n 是 3 或 5

，我希望发生一些事情

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

只会考虑 the last 结果。

为了兼顾两者，您需要像这样更改代码：

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>

使用委托（此代码更通用，您可以根据需要添加任意数量的选择，包括在运行时。）

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>

Answer 2

试试这个代码：

  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>

注意： id 属性必须以字母开头；

Answer 3

第一个问题是元素 ID 不能以数字开头。

其次，当使用 document.querySelectorAll() 时，您需要使用 .forEach() 方法一次遍历每个节点。

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>

Answer 4

这有点棘手，因为 id 属性的要求在 HTML 4 和 HTML 5 之间非常不同。This answer 解释得很好

Answer 5

问题是因为标识符的第一个字符是数字，请参阅此 post:

中的更多信息

More info about first character of an identifier numeric

您还需要为每个元素单独添加 EventListener。

提示：将 document.querySelectorAll 的结果分配给 const 或 var 或 let，有助于您调试代码，因为您可以放置断点并查看它们是否具有正确的值。

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

querySelectorAll - 多个 ID 以隐藏两个不同下拉菜单中的选项

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

javascript

jquery

selectors-api