Displaying multiple divs based on select tag selection

Question

What I am trying to achieve is if a user selects a number in the select tag, then that many forms should display below the select tag. I am using Jquery to achieve this. But it's not working:

Select tag:-

<label>How many credit cards do you have:*
    <select name="debts_cards" id="debts_cards" required>
        <option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option>
    </select>
</label>

The 10 divs containing the same type of form:-

<div id="debts_cards_extra">
    <h2>Credit Card 1</h2>
    <label>
        Provider:
        <input type="text" name="debts_cards_extra_provider">
    </label>
    <label>
        Credit Card Limit:
        <input type="number" name="debts_cards_extra_limit">
    </label>
    <label>
        How much do you have owing:
        <input type="number" name="debts_cards_extra_owing">
    </label>
</div>
<div id="debts_cards_extra2">
    <h2>Credit Card 2</h2>
    <label>
        Provider:
        <input type="text" name="debts_cards_extra2_provider">
    </label>
    <label>
        Credit Card Limit:
        <input type="number" name="debts_cards_extra2_limit">
    </label>
    <label>
        How much do you have owing:
        <input type="number" name="debts_cards_extra2_owing">
    </label>
</div>
<div id="debts_cards_extra3">
    <h2>Credit Card 3</h2>
    <label>
        Provider:
        <input type="text" name="debts_cards_extra3_provider">
    </label>
    <label>
        Credit Card Limit:
        <input type="number" name="debts_cards_extra3_limit">
    </label>
    <label>
        How much do you have owing:
        <input type="number" name="debts_cards_extra3_owing">
    </label>
</div>
<!-- and so on..... -->

Jquery:-

$(document).ready(function(){
  $('#debts_cards').on('change', function() {
  if ( this.value == '0' )
  //.....................^.......
  {
    $("#debts_cards_extra").hide();
  }
  elseif ( this.value == '1' )
  {
    $("#debts_cards_extra").show();
  }
  elseif ( this.value == '2' )
  {
    $("#debts_cards_extra").show();
    $("#debts_cards_extra2").show();
  }
  elseif ( this.value == '3' )
  {
    $("#debts_cards_extra").show();
    $("#debts_cards_extra2").show();
    $("#debts_cards_extra3").show();
  }
  elseif ( this.value == '4' )
  {
    $("#debts_cards_extra").show();
    $("#debts_cards_extra2").show();
    $("#debts_cards_extra3").show();
    $("#debts_cards_extra4").show();
  }
// and so on.....
});
});

Why is it not working? Here you can see it live . Please note that I am working on Wordpress. Any help in the right direction is appreciated.

Answer 1

In the live demo, All 10 divs are shown when the page is first loaded.

So the $("#debts_cards_extra").show(); wont make any difference because the divs are already visible in the first place.

For every divs you can do style = "display:none;" :

<div id="debts_cards_extra" style = "display:none;">
    <h2>Credit Card 1</h2>
    <label>
        Provider:
        <input type="text" name="debts_cards_extra_provider">
    </label>
    <label>
        Credit Card Limit:
        <input type="number" name="debts_cards_extra_limit">
    </label>
    <label>
        How much do you have owing:
        <input type="number" name="debts_cards_extra_owing">
    </label>
</div>

EDIT:: I changed the elseif to if in This fiddle. It Worked.

Answer 2

you missed the id instead of

 <select name="debts_cards" required> 

use

<select id="debts_cards" required>

also change:

this.value to $(this).val();

Answer 3

<select name="debts_cards" required> replace <select name="debts_cards" id='debts_cards' required>

take select value in one variable var selectedValue=$('#debts_cards').val() and replace this.value to selectedValue

Answer 4

 $(document).ready(function(){ ABC(); }); function ABC(){ var sleectedValue=$('#debts_cards').val(); if (sleectedValue == '0' ) //.....................^....... { $("#debts_cards_extra").hide(); } else if (sleectedValue == '1' ) { $("#debts_cards_extra").show(); } else if (sleectedValue == '2' ) { $("#debts_cards_extra").show(); $("#debts_cards_extra2").show(); } else if (sleectedValue == '3' ) { $("#debts_cards_extra").show(); $("#debts_cards_extra2").show(); $("#debts_cards_extra3").show(); } else if (sleectedValue == '4' ) { $("#debts_cards_extra").show(); $("#debts_cards_extra2").show(); $("#debts_cards_extra3").show(); $("#debts_cards_extra4").show(); } // and so on..... } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <label>How many credit cards do you have:* <select name="debts_cards" id="debts_cards" onchange="ABC();" required> <option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option> </select> </label> <div id="debts_cards_extra"> <h2>Credit Card 1</h2> <label> Provider: <input type="text" name="debts_cards_extra_provider"> </label> <label> Credit Card Limit: <input type="number" name="debts_cards_extra_limit"> </label> <label> How much do you have owing: <input type="number" name="debts_cards_extra_owing"> </label> </div> <div id="debts_cards_extra2"> <h2>Credit Card 2</h2> <label> Provider: <input type="text" name="debts_cards_extra2_provider"> </label> <label> Credit Card Limit: <input type="number" name="debts_cards_extra2_limit"> </label> <label> How much do you have owing: <input type="number" name="debts_cards_extra2_owing"> </label> </div> <div id="debts_cards_extra3"> <h2>Credit Card 3</h2> <label> Provider: <input type="text" name="debts_cards_extra3_provider"> </label> <label> Credit Card Limit: <input type="number" name="debts_cards_extra3_limit"> </label> <label> How much do you have owing: <input type="number" name="debts_cards_extra3_owing"> </label> </div> 

Answer 5

First of all, typing out or copy-pasting all of the repeated HTML is a really poor technique when they all follow some kind of format. It's better if for you to generate/remove the HTML onchange .

Also a form is probably better than a div since they are somewhat like a form, and it would probably be easier to target them.

 var credit_card_form = ` <label> Provider: <input type="text" name="debts_cards_extra_provider"> </label> <label> Credit Card Limit: <input type="number" name="debts_cards_extra_limit"> </label> <label> How much do you have owing: <input type="number" name="debts_cards_extra_owing"> </label> `; function formGenerator (event) { let quantity = event.target.value let forms = $("form") console.log(forms.length, quantity) if (forms.length > quantity) { forms.slice(quantity).each( function(index) { $(this).remove() }) } if (forms.length < quantity) { for (let i = forms.length; i < quantity; i++) { let new_form = document.createElement("form"); new_form.name = "debts_cards_extra" let num = i + 1 let title = `<h2>Credit Card ${num}</h2>` new_form.innerHTML = title + credit_card_form $(".body").append(new_form); } } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="body"> <label>How many credit cards do you have:* <select name="debts_cards" id="debts_cards" onchange="formGenerator(event)" required> <option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option> </select> </label> </div>