Question

我需要显示一个组合框并隐藏其他输入，并仅在选择其中一个选项时显示它们。

我尝试过，但是当我选择某些东西时它们根本不显示。尝试了我在网上看到的所有内容，但他们根本无法解决我的问题，我也不知道为什么；

function showDiv() {
  getSelectValue = document.getElementById("hidden").value;
  if (getSelectValue == "1") {
    document.getElementById("hidden").style.display = "block";
  } else {
    document.getElementById("hidden").style.display = "none";
  }
}

<select id="select-styled">
  <option selected value="">Nessuna selezione</option>
  <option value="ds">Disposizioni semplici</option>
  <option value="dr">Disposizioni ripetizione</option>
  <option value="cs">Combinazoni semplici</option>
  <option value="cr">Combinazoni ripetizione</option>
  <option value="ps">Permutazioni semplici</option>
  <option value="pr">Permutazioni ripetizione</option>
  <option value="gs">Gestione stringa</option>
</select>
</div>
<br>
<div id="hidden" style="width:200px;" onchange="showDiv()">
  <label for="nTextField">Inserire n</label><br>
  <input type="text" name="textField" class="textField" id="nTextField"><br><br>
  <label for="kTextField">Inserire k</label><br>
  <input type="text" name="textField" class="textField" id="kTextField"><br><br>
  <label for="answerTextField">Ecco la risposta</label><br>
  <input type="text" name="textField" class="textField" id="answerTextField"><br><br>
  <input type="text" name="textField" class="stringManagement" id="stringManagement">
</div>

Answer 1

您需要在选择代码（而不是div）上添加 onchange 功能

function showDiv() {
  var x = document.getElementById("select-styled").value;
  if(x != "") {
    document.getElementById("myDiv").style.display = "block";

    // or any desired code...
  }
}

<select id="select-styled" onchange="showDiv()">
    <option selected value="">Nessuna selezione</option>
    <option value="ds">Disposizioni semplici</option>
    <option value="dr">Disposizioni ripetizione</option>
    <option value="cs">Combinazoni semplici</option>
    <option value="cr">Combinazoni ripetizione</option>
    <option value="ps">Permutazioni semplici</option>
    <option value="pr">Permutazioni ripetizione</option>
    <option value="gs">Gestione stringa</option>
</select>
  <br>
  <div class="hidden" id="myDiv" style="width:200px; display:none">
      <label for="nTextField">Inserire n</label><br>
      <input type="text" name="textField" class="textField" id="nTextField" ><br><br>
      <label for="kTextField">Inserire k</label><br>
      <input type="text" name="textField" class="textField" id="kTextField" ><br><br>
      <label for="answerTextField">Ecco la risposta</label><br>
      <input type="text" name="textField" class="textField" id="answerTextField" ><br><br>
      <input type="text" name="textField" class="stringManagement" id="stringManagement">
</div>

Answer 2

<select id="select-styled" onchange="showDiv()">
        <option selected value="">Nessuna selezione</option>
        <option value="ds">Disposizioni semplici</option>
        <option value="dr">Disposizioni ripetizione</option>
        <option value="cs">Combinazoni semplici</option>
        <option value="cr">Combinazoni ripetizione</option>
        <option value="ps">Permutazioni semplici</option>
        <option value="pr">Permutazioni ripetizione</option>
        <option value="gs">Gestione stringa</option>
    </select>
    <br>
    <div id="hidden" style="width:200px; display:none" >
        <label for="nTextField">Inserire n</label><br>
        <input type="text" name="textField" class="textField" id="nTextField" ><br><br>
        <label for="kTextField">Inserire k</label><br>
        <input type="text" name="textField" class="textField" id="kTextField" ><br><br>
        <label for="answerTextField">Ecco la risposta</label><br>
        <input type="text" name="textField" class="textField" id="answerTextField" ><br><br>
        <input type="text" name="textField" class="stringManagement" id="stringManagement">
</div>

<script>
function showDiv() {
    document.getElementById("hidden").style.display = "block";;
}
</script>

我需要以各种不同的选择来显示不同的输入，并且需要让其他输入保持隐藏

2 个答案: