Question 210122 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to Generate textboxes based on a numeric value from Dropdown Menu?

Forenote: I am extremely new and inexperienced with HTML and Javascript. Apologies for any inefficiencies or syntax that seems nonsensical.

I am currently trying to include a feature on an HTML page with a drop-down menu containing numeric values from 1 to 4. A corresponding amount of text boxes is generated based on the value chosen in the dropdown menu.

Here is the code I have so far:

<script>
  $("#elementreg").on("change", function() {
  var val = $(this).val();
  
  $(".types").hide().find('input:text').val(''); // 
  if (val) $("#" + val).show();
  });
</script>

<select class="medium" id="elementreg" name="IDs">
    <option value="" selected="selected"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>

</select>

<div class="types" id="1">
  <input name="First Chip ID">
</div>

<div class="types" id="2">
    <input name="First Chip ID">
    <input name="Second Chip ID">
</div>

<div class="types" id="3">
    <input name="First Chip ID">
    <input name="Second Chip ID">
    <input name="Third Chip ID">
</div>

<div class="types" id="4">
    <input name="First Chip ID">
    <input name="Second Chip ID">
    <input name="Third Chip ID">
    <input name="Fourth Chip ID">
</div>

The result is that nothing occurs when selecting the values on the dropdown menu and the input boxes are not hidden. My suspicion is that I need to include this CSS code snippet:

.types {
  display: none
}

But am out of my depth as to how to approach this. In addition, I am unsure if the script was implemented correctly to begin with. Any and all advice is greatly appreciated.

Tags:

2

Answers


  1. 0

    Inside the event handler function, you can first hide all the elements with the class. Then show only the element having the selected id.

    Also, if you place the script before the elements then wrap your code with $(document).ready(...).

    Demo:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>
  .types {
    display: none;
  }
</style>

<script>
  $(document).ready(function(){
    $("#elementreg").on("change", function() {
      var val = $(this).val();

      $('.types').hide(); //hide all
      $(`#${val}`).show(); //show by matching the selected value
    });
  });
</script>

<select class="medium" id="elementreg" name="IDs">
    <option value="" selected="selected"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>

</select>

<div class="types" id="1">
  <input name="First Chip ID">
</div>

<div class="types" id="2">
    <input name="First Chip ID">
    <input name="Second Chip ID">
</div>

<div class="types" id="3">
    <input name="First Chip ID">
    <input name="Second Chip ID">
    <input name="Third Chip ID">
</div>

<div class="types" id="4">
    <input name="First Chip ID">
    <input name="Second Chip ID">
    <input name="Third Chip ID">
    <input name="Fourth Chip ID">
</div>
    Login or Signup to reply.
  2. 0

    The problem is that the script gets executed before your DOM elements are rendered. So $("$elementreg") is not able to find the element for attaching the onChange listener.

    So it’s better to keep the scripts at the end of the body or use $( document ).ready()

    .types {
  display: none;
}
    <select class="medium" id="elementreg" name="IDs">
  <option value="" selected="selected"></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>

</select>

<div class="types" id="1">
  <input name="First Chip ID">
</div>

<div class="types" id="2">
  <input name="First Chip ID">
  <input name="Second Chip ID">
</div>

<div class="types" id="3">
  <input name="First Chip ID">
  <input name="Second Chip ID">
  <input name="Third Chip ID">
</div>

<div class="types" id="4">
  <input name="First Chip ID">
  <input name="Second Chip ID">
  <input name="Third Chip ID">
  <input name="Fourth Chip ID">
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
  $("#elementreg").on("change", function() {
    var val = $(this).val();
    $(".types").hide().find('input:text').val(''); // 
    if (val) $("#" + val).show();
  });
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search