JS 脚本在多个 id 后停止工作

Question

我创建了这个 javascript 函数来检测女巫选​​项是否被选中，并且根据所选的文本，它应该运行另一个函数。问题是它只适用于第一个“选择”ID。我已经玩了很长时间了，但我仍然无法弄清楚为什么会发生这种情况。

HTML：

<div id="amcdiv" class="vanish">
    <label>
        <select id="select" onchange="selection();">
            <option selected>Típus</option>
            <option value="gremlin">Gremlin</option>
        </select>
    </label>
  </div>


<div id="audidiv" class="vanish">
    <label>
        <select id="select" onchange="selection();">
            <option selected>Típus</option>
            <option value="s8">S8</option>
            <option>RS4</option>
            <option>RS7</option>
            <option>R8</option>
        </select>
    </label>
  </div>


<div id="bmwdiv" class="vanish">
    <label>
        <select id="select" onchange="selection();">
            <option selected>Típus</option>
            <option value="e38">750 e38</option>
            <option value="e65">760 e65</option>
            <option value="e46">M3 e46</option>
            <option value="e92">M3 e92</option>
            <option value="m4">M4 2021</option>
            <option value="e34">M5 e34</option>
            <option value="e39">M5 e39</option>
            <option value="e60">M5 e60</option>
            <option value="e24">M635 CSi e24</option>
            <option value="m8">M8 Competition</option>
        </select>
    </label>
  </div>

JS：

function selection() {
    var select = document.getElementById("select").value;
    if (select == "e38") {
      oktext();
    }
    if (select == "e65") {
        oktext();
      }
    if (select == "e46") {
      goodtext();
    }
    if (select == "e92") {
      oktext();
    }
    if (select == "e34") {
      goodtext();
    }
    if (select == "e39") {
      goodtext();
    }
    if (select == "e60") {
      goodtext();
    }
    if (select == "m4") {
      goodtext();
    }
    if (select == "m4") {
      goodtext();
    }
    if (select == "gremlin") {
      goodtext();
    }
    if (select == "s8") {
      goodtext();
    }
    }

Answer 1

Javascript id 必须是唯一且不同的。如果您想要一个 id，请改用 class。

参考： https://www.w3schools.com/html/html_id.asp https://www.w3schools.com/html/html_classes.asp

Answer 2

我相信这就是您想要实现的目标：

HTML：

<div id="amcdiv" class="vanish">
  <label>
    <select onchange="selection(this.value);">
      <option value="Tipus" selected>Típus</option>
      <option value="gremlin">Gremlin</option>
    </select>
  </label>
</div>
<div id="audidiv" class="vanish">
  <label>
    <select onchange="selection(this.value);">
      <option value="Tipus" selected>Típus</option>
      <option value="s8">S8</option>
      <option value="RS4">RS4</option>
      <option value="RS7">RS7</option>
      <option value="R8">R8</option>
    </select>
  </label>
</div>
<div id="bmwdiv" class="vanish">
  <label>
    <select onchange="selection(this.value);">
      <option value="Tipus" selected>Típus</option>
      <option value="e38">750 e38</option>
      <option value="e65">760 e65</option>
      <option value="e46">M3 e46</option>
      <option value="e92">M3 e92</option>
      <option value="m4">M4 2021</option>
      <option value="e34">M5 e34</option>
      <option value="e39">M5 e39</option>
      <option value="e60">M5 e60</option>
      <option value="e24">M635 CSi e24</option>
      <option value="m8">M8 Competition</option>
    </select>
  </label>
</div>

JS

function selection(value) {
  console.log(value);
}

您现在可以对任何选择输入生成的任何字符串做出反应。请记住在每个 option 节点中始终包含 value 字段。

当谈到你的代码为什么不工作时，它在id=select 上迷失了，它不是唯一的，并且总是会返回当前选择的第一个（在 DOM 中找到的）节点的值和id=select。另一件事是它也无法理解没有value 属性集的option 节点。