javascript - HTML 表单 IF 语句

Question

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

我想要它做的是检查菜单栏 onchange 并根据用户选择的选择显示新的菜单栏。例如，选项 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 的一个示例。

<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 打交道，这就是我已经走了多远。预先感谢 - 亲切的问候，奥利弗

Answer 1

如果您从不同的 Angular 解决问题，实际上并不太复杂:您只需根据选择元素的值切换其他元素的外观即可。

• 因此，其他元素的基态应该隐藏，并且当选择选项更新时，您始终重置为基态。

• 既然已经建立，您需要知道 JS 不是响应式的:以便监听 <select> 的更改元素值，您必须将事件监听器绑定(bind)到您的 Arende选择。这可以通过使用 .addEventListener() 来完成方法。

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

这是您可以使用的示例代码。它绝对远非最佳，因为您可以更改一些内容来提高性能(请参阅最后的注释):

var Arende = document.getElementById("Arende");
var Rubrik2 = document.getElementById("srt");
var Bestallning = document.getElementById("Bestallning");
var Anmalan = document.getElementById("Anmalan");

// Listen to changes in <select>
Arende.addEventListener('change', function() {

  // Get the value of selected <option>
  var value = this.options[this.selectedIndex].value;

  // Hide all other elements
  // I recomemnd that you give these elements a class instead!
  Rubrik2.style.display = 'none';
  Bestallning.style.display = 'none';
  Anmalan.style.display = 'none';

  // Now we use switch statements to go through all the options
  switch(value) {

    case 'Bestallning':
      Bestallning.style.display = 'block';
      break;

    case 'Anmalan':
      Anmalan.style.display = 'block';
      break;

    // And etc...

  }

});

代码优化改进注意事项

1. 您应该为所有“其他元素”分配一个类，这些元素的外观取决于 <select> 的值。元素。这使得使用毯子变得非常容易style.display = 'none'对所有元素进行声明，而不必手动枚举所有元素
2. 附加<option>到 <option> 中的目标元素映射信息本身，例如通过 HTML5 data-属性。这使得它变得更加容易，我们甚至不需要使用 switch/case根本没有声明。在下面的示例中，我假设 <option> 的值直接对应你要显示的元素的ID。

这是更多概念验证代码:

var Arende = document.getElementById("Arende");
var Bestallning = document.getElementById("Bestallning");
var Anmalan = document.getElementById("Anmalan");

// Listen to changes in <select>
Arende.addEventListener('change', function() {

  // Get the value of selected <option>
  var value = this.options[this.selectedIndex].value;

  // Hide all other elements, but show the one whose ID matches option value
  var otherElements = document.querySelectorAll('.otherElements');
  for (var i = 0; i < otherElements.length; i++) {
    var el = otherElements[i];
    
    if (el.id === value)
      el.style.display = 'block';
    else
      el.style.display = 'none';
  }
});

.hidden {
  display: none;
}

<h4>Arende</h4>
<select id="Arende" name="Arende" required>
    <option value="Bestallning">Bestallning</option>
    <option value="Anmalan">Anmalan</option>
</select>

<!-- Other elements -->
<div id="Bestallning" class="otherElements hidden">Bestallning</div>
<div id="Anmalan" class="otherElements hidden">Anmalan</div>