CODEWITHSUNDEEP
javascripthtmlcss
Matilda Gori
Matilda Gori

Reputation: 23

I need to show different inputs with every different choices and need to the others to remain hidden

I need to show a combo box and hide other inputs and show them only when I select one of the options.

I tried this, but they don't show at all when I select something. Tried all the thing I saw online, but they didn't solve my problem at all, I don't know why;

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>

Upvotes: 2

Views: 61

Answers (2)

Muhammad Shazim Khan
Muhammad Shazim Khan

Reputation: 141

You need to add onchange function on the select tag, not the div

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>

Upvotes: 2

Igor Melekhov
Igor Melekhov

Reputation: 329

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

Upvotes: 0

Related Questions