时间戳

首页 > 解决方案 > querySelectorAll - 在两个不同的下拉菜单中隐藏选项的多个 ID

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

问题描述

我在同一页面中有两个带有两个不同 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>

标签： javascriptjqueryselectors-api

解决方案

首先，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>

推荐阅读