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 必须以字母开头。至于处理程序，由于这不是 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

问题是因为标识符的第一个字符是数字，请参阅这篇文章中的更多信息：

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>

Answer 3

试试这个代码：

  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 4

第一个问题是元素 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 5

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