Javascript HTML表单IF语句

我不熟悉HTML和javascript，我对代码示例有问题。基本上，该代码旨在与复选框一起使用，但我希望它与某个下拉菜单（也称为选择选项）一起使用

<input id="more" type="checkbox">Add More Users</input>
<div id="yourDiv"> ...other form... </div>

<script>
window.onload = function () {
    document.getElementById('more').onclick = function () {
        if (this.checked)
            document.getElementById('yourDiv').style.display = 'block';
        else
            document.getElementById('yourDiv').style.display = 'none';  
    }
}
</script>

添加更多用户
…其他形式。。。
window.onload=函数（）{
document.getElementById（'more'）。onclick=function（）{
如果（选中此项）
document.getElementById（'yourDiv'）.style.display='block'；
其他的
document.getElementById（'yourDiv'）.style.display='none'；
}
}

我想让它做的是在更改后检查菜单栏，并根据用户选择的内容显示一个新的菜单栏。例如，选项1将打开menubar1，以此类推

到目前为止，我已经完成了下面的代码，但我不知道它是否接近解决方案

下面的代码就是触发脚本的代码

<select id="Ärende" name="Ärende" required onchange=FuncÄrende()>
          <option id="BeställningY" value="Beställning">Beställning</option>
          <option id="AnmälanY" value="Anmälan">Anmälan</option>
          <option id="BehörighetY" value="Behörighet">Behörighet</option>
          <option id="MiljörondY" value="Miljörond">Miljörond</option>
          <option id="AnnatY" value="Annat">Annat</option>
        </select>

贝斯特奥林酒店
安玛兰
贝约里赫特
米尔约隆
安娜德

下面的代码是一个脚本，它将“解锁/显示”我所有其他菜单栏中的不同div。此代码适用于BeställningDiv。其余的看起来都一样，但有些不同，所以我只包括其中一个。

    <script>
            function FuncÄrende() {
              var Ärende = document.getElementById("Ärende");
              var ÄrendeValue = Ärende.options[Ärende.selectedIndex].value;

              if      (document.getElementById('BeställningY').value == "Beställning") {
                document.getElementById("BeställningDiv").style.display == "block";
                document.getElementById("AnmälanDiv").style.display == "none";
                document.getElementById("BehörighetDiv").style.display == "none";
                document.getElementById("MiljörondDiv").style.display == "none";
                document.getElementById("AnnatDiv").style.display == "none";
}
        }
      </script>

<div id="BeställningDiv" style="display:none;">
    <h4 id="BeställningT">Beställning</h4>
        <select id="Beställning" name="Beställning">
          <option value="IT-Utrustning">IT-Utrustning</option>
          <option value="Kontors materiell">Kontors materiell</option>
          <option value="Belysning">Belysning</option>
          <option value="Ergonomi">Ergonomi</option>
        </select>
</div>

函数FuncÄrende（）{
varÄrende=document.getElementById（“Ärende”）；
varÄrendeValue=Ärende.options[Ärende.selectedIndex].value；
if（document.getElementById（'BeställningY'）。value==“Beställning”）{
document.getElementById（“BeställningDiv”）.style.display==“block”；
document.getElementById（“AnmälanDiv”）.style.display==“无”；
document.getElementById（“BehörighetDiv”）.style.display==“无”；
document.getElementById（“MiljörondDiv”）.style.display==“无”；
document.getElementById（“AnnatDiv”）.style.display==“无”；
}
}

最后，下面的代码是脚本将解锁的不同div的一个示例。

    <script>
            function FuncÄrende() {
              var Ärende = document.getElementById("Ärende");
              var ÄrendeValue = Ärende.options[Ärende.selectedIndex].value;

              if      (document.getElementById('BeställningY').value == "Beställning") {
                document.getElementById("BeställningDiv").style.display == "block";
                document.getElementById("AnmälanDiv").style.display == "none";
                document.getElementById("BehörighetDiv").style.display == "none";
                document.getElementById("MiljörondDiv").style.display == "none";
                document.getElementById("AnnatDiv").style.display == "none";
}
        }
      </script>

<div id="BeställningDiv" style="display:none;">
    <h4 id="BeställningT">Beställning</h4>
        <select id="Beställning" name="Beställning">
          <option value="IT-Utrustning">IT-Utrustning</option>
          <option value="Kontors materiell">Kontors materiell</option>
          <option value="Belysning">Belysning</option>
          <option value="Ergonomi">Ergonomi</option>
        </select>
</div>

贝斯特奥林酒店
它是定制的
康托斯材料公司
贝利斯宁
麦角新碱

请为我提供易于理解的解决方案，因为我对HTML非常陌生。在我的整个生活中，我花了大约9个小时在HTML上，这就是我所取得的成就。提前感谢,亲切的问候,， 奥利弗

在最后一个else之后，您忘记了

{}

，在函数

run（）

旁边，您需要打开

{

并将所有代码添加到其中，然后关闭它

}

var Arende = document.getElementById("Arende");
var ArendeValue = Arende.options[Arende.selectedIndex].value;

在最后一个else之后，您忘记了

{}

，在函数

run（）

旁边，您需要打开

{

并将所有代码添加到其中，然后关闭它

}

var Arende = document.getElementById("Arende");
var ArendeValue = Arende.options[Arende.selectedIndex].value;

这是获取值的正确方法。你所做的将使你得到对我提供的答案有用的元素

另外，我建议您学习ChromeDevTools，它非常适合快速调试

这是获取值的正确方法。你所做的将使你得到对我提供的答案有用的元素

---

另外，我建议您学习Chrome开发工具，它是快速调试的完美工具。

您有很多大括号错误，请与下面的代码进行比较：

function run() { // braces for function
  var Arende = document.getElementById("Arende").value; // notice .value
  var Rubrik2 = document.getElementById("srt").value;
  var Bestallning = document.getElementById("Bestallning").value;
  var Anmalan = document.getElementById("Anmalan").value;
  if (Arende == "Bestallning") {
    Rubrik2.text = "Behorighet"; // single =
    Bestallning.style.display = "block";
  } // need to be closed here and same for other
  else if (Arende == "Anmalan") {
    Rubrik2.text = "Anmalan"; // single =
    Anmalan.style.display = "block";
  }
  else {
    rubrik2.style.display = "none";
    Anmalan.style.display = "none";
    Bestallning.style.display = "none";
  }
}

---

您有许多大括号错误，请与以下代码进行比较：

function run() { // braces for function
  var Arende = document.getElementById("Arende").value; // notice .value
  var Rubrik2 = document.getElementById("srt").value;
  var Bestallning = document.getElementById("Bestallning").value;
  var Anmalan = document.getElementById("Anmalan").value;
  if (Arende == "Bestallning") {
    Rubrik2.text = "Behorighet"; // single =
    Bestallning.style.display = "block";
  } // need to be closed here and same for other
  else if (Arende == "Anmalan") {
    Rubrik2.text = "Anmalan"; // single =
    Anmalan.style.display = "block";
  }
  else {
    rubrik2.style.display = "none";
    Anmalan.style.display = "none";
    Bestallning.style.display = "none";
  }
}

---

如果从不同的角度处理问题，实际上并不太复杂：您只需要根据select元素的值切换其他元素的外观

• 因此，其他图元的地面状态应隐藏，并且在更新选择选项时，您始终重置为地面状态

• 既然已经建立，您需要知道JS不是被动的：为了监听对
  元素值的更改，您必须将事件监听器绑定到

  Arende

  select。这可以通过使用

  .addEventListener（）

  方法完成

• 使用

  switch

  语句，而不是深度嵌套的if/else语句。想象一下，如果您有25个不同的选项，这意味着您的if/else树将嵌套25层深

下面是一个可以使用的示例代码。这显然远远不是最佳的，因为有几件事可以改变以提高性能（请参见最后的注释）：

。隐藏{
显示：无；
}

Arende
百事通
安马兰
百事通
Anmalan

如果从不同的角度解决问题，实际上并不太复杂：您只需根据select元素的值切换其他元素的外观

• 因此，其他图元的地面状态应隐藏，并且在更新选择选项时，您始终重置为地面状态

• 既然已经建立，您需要知道JS不是被动的：为了监听对
  元素值的更改，您必须将事件监听器绑定到

  Arende

  select。这可以通过使用

  .addEventListener（）

  方法完成

• 使用

  switch

  语句，而不是深度嵌套的if/else语句。想象一下，如果您有25个不同的选项，这意味着您的if/else树将嵌套25层深

下面是一个可以使用的示例代码。这显然远远不是最佳的，因为有几件事可以改变以提高性能（请参见最后的注释）：

。隐藏{
显示：无；
}

Arende
百事通
安马兰
百事通
Anmalan

只是您有语法错误，不幸的是它只是{} 将它们添加到

else

之后，并在末尾将其关闭。再加上