Question

我试图让某个表单中的某些字段显示，具体取决于下拉菜单的选择。这是我的代码的简化版本，尝试将显示从“无”更改为“阻止”。出了什么问题？

function selectTrain(trainType) {
  document.getElementById("test").innerHTML = (trainType);
  var elements = document.getElementsByClassName(trainType);
  for (var i = 0, length = elements.length; i < length; i++) {
    elements[i].style.display = 'inline-block';
  }
};

<select onchange="selectTrain(this.value)">
      <option value="" disabled="disabled" selected="selected">Please select a train type</option>
      <option value="lhcs">Loco-hauled carriage set</option>
      <option value="mu">Multiple Unit</option>
      <option value="f">Frieght</option>
    </select>

<!-- Form -->

<form name="myForm">
  <p>Formation Information:</p>
  <ul>
    <li class="lhcs f">Loco number: <input type="text" id="locoid1"></li>
    <li class="lhcs">Loco number: <input type="text" id="locoid2"></li>
    <li class="mu">Formation number: <input type="text" id="formationid">

    </li>
  </ul>

  <p>Names:</p>
  <ul>
    <li class="lhcs f">Loco name: <input type="text" id="loconame1"></li>
    <li class="lhcs">Loco name: <input type="text" id="loconame2"></li>
    <li class="mu">Formation name: <input type="text" id="formationname"></li>
    <li class="lhcs mu">Train name: <input type="text" id="trainname"></li>
  </ul>

  <p>Train Operating Company:</p>
  <ul>
    <li class="lhcs">Loco TOC: <input type="text" id="locotoc1"></li>
    <li class="lhcs">Loco TOC: <input type="text" id="locotoc2"></li>
    <li class="lhcs">Carriage TOC: <input type="text" id="cartoc"></li>
    <li class="mu">Formation TOC: <input type="text" id="formationtoc"></li>
  </ul>

  <p>Places:</p>
  <ul>
    <li class="lhcs mu f">Spot or embark point: <input type="text" list="places" id="placeorigin"></li>
    <li class="lhcs mu">Destination: <input type="text" list="places" id="placedest"></li>
  </ul>

  <p>Date and Time:</p>
  <input type="date" id="dateandtime">

  <p>Number of Carriages: </p>
  <input type="number" id="carnum">
  <ul>
    <li class="lhcs mu">Carriage 1: <input type="text" id="carid1"></li>
  </ul>

  <button id='submission' type='button' onClick="goForIt()">Submit</button>
</form>

Answer 1

您只是忘了向DOM添加id =＆＃34; test＆＃34;的元素，例如<div id="test"></div>。查看代码段，它有效（我已在页面底部添加了此div）：

＆＃13;

  function selectTrain(trainType) {
    document.getElementById("test").innerHTML = (trainType);
    var elements = document.getElementsByClassName(trainType);
    for(var i = 0, length = elements.length; i < length; i++) {
      elements[i].style.display = 'inline-block';
    }
  };

＆＃13;

<select onchange="selectTrain(this.value)">
  <option value="" disabled="disabled" selected="selected">Please select a train type</option>
  <option value="lhcs">Loco-hauled carriage set</option>
  <option value="mu">Multiple Unit</option>
  <option value="f">Frieght</option>
</select>

<!-- Form -->

<form name="myForm">
  <p>Formation Information:</p>
  <ul>
    <li class="lhcs f">Loco number: <input type="text" id="locoid1"></li>
    <li class="lhcs">Loco number: <input type="text" id="locoid2"></li>
    <li class="mu">Formation number: <input type="text" id="formationid">        

    </li>
  </ul>

  <p>Names:</p>
  <ul>
    <li class="lhcs f">Loco name: <input type="text" id="loconame1"></li>
    <li class="lhcs">Loco name: <input type="text" id="loconame2"></li>
    <li class="mu">Formation name: <input type="text" id="formationname"></li>
    <li class="lhcs mu">Train name: <input type="text" id="trainname"></li>
  </ul>

  <p>Train Operating Company:</p>
  <ul>
    <li class="lhcs">Loco TOC: <input type="text" id="locotoc1"></li>
    <li class="lhcs">Loco TOC: <input type="text" id="locotoc2"></li>
    <li class="lhcs">Carriage TOC: <input type="text" id="cartoc"></li>
    <li class="mu">Formation TOC: <input type="text" id="formationtoc"></li>
  </ul>

  <p>Places:</p>
  <ul>
    <li class="lhcs mu f">Spot or embark point: <input type="text" list="places" id="placeorigin"></li>
    <li class="lhcs mu">Destination: <input type="text" list="places" id="placedest"></li>
  </ul>

  <p>Date and Time:</p>
  <input type="date" id="dateandtime">

  <p>Number of Carriages: </p>
  <input type="number" id="carnum">
  <ul>
    <li class="lhcs mu">Carriage 1: <input type="text" id="carid1"></li>
  </ul>

<button id='submission' type='button' onClick="goForIt()">Submit</button>
</form>

<div id="test"></div>

＆＃13;

无法通过类获取Javascript来隐藏元素

1 个答案: