How to display input options only after selecting an option from the 'select class' tag?

Question

I am using the following html code to display options :

<select class="form-control input-lg" style="text-align:center">
    <option value="type">-- Select a Type --</option>
    <option value="student">Student</option>
    <option value="company">Company</option>
</select>

Now suppose I want to display a list of input boxes within the div tag (as shown below) only if I select the option Student and a separate list of input options for Company based on what the user selects. The following input boxes are for Student option:

<div id="divina">
    <input class="form-control input-lg" name="name" placeholder="Full Name" type="text" >              
    <input class="form-control input-lg" name="usn" placeholder="USN" type="text">
    <select class="form-control input-lg" name="branch">
        <option value="Month">-- Select branch --</option>
        <option value="Month">Computer Science & Engineering</option>
        <option value="Month">Information Science & Engineering</option>
        <option value="Month">Electronics & Communication Engineering</option>
        <option value="Month">Electrical & Electronics Engineering</option>
        <option value="Month">Mechanical Engineering</option>
        <option value="Month">Civil Engineering</option>
        <option value="Month">MBA</option>
        <option value="Month">MCA</option>
    </select>
    <input class="form-control input-lg" name="contact" placeholder="Contact No." type="text">
    <input class="form-control input-lg" name="email" placeholder="E-mail" type="email">
    <input class="form-control input-lg" name="password" placeholder="Password" type="password">
</div>

I am using the following javascript in the head tag:

JS :

function show(that){
    if(that.value=="student"){
          document.getElementById("divina").style.display = "block";
    }
    else{
          document.getElementById("divina").style.display = "none";
    }
}

Well I have tried a lot, but it does not work at all, any input or suggestions would be appreciated!!!

please confirm!! you mean you have two div block contents, one for student and another for company respectively. now you wanna display student block when student is selected and company block when company is selected. is it so? — ameenulla0007, Mar 26 '16 at 10:30

score 1 · Answer 1 · answered Mar 26 '16 at 10:35

Give your select an identifier :

<select id="my-list" class="form-control input-lg" style="text-align:center">
    <option value="type">-- Select a Type --</option>
    <option value="student">Student</option>
    <option value="company">Company</option>
</select>

Then attach onchange() event to it to toggle display :

$('body').on('change','#my-list', function(){
    if($(this).val()=="student")
        $("#divina").show();
    else
        $("#divina").hide(); 
});

NOTE: You could hide you div by default using inline style style="display:none".

Hope this helps.

$('body').on('change','#my-list', function(){
    if($(this).val()=="student")
        $("#divina").show();
    else
        $("#divina").hide(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="my-list" class="form-control input-lg" style="text-align:center">
  <option value="type">-- Select a Type --</option>
  <option value="student">Student</option>
  <option value="company">Company</option>
</select>
<div id="divina" style="display:none">
  <input class="form-control input-lg" name="name" placeholder="Full Name" type="text" >              
  <input class="form-control input-lg" name="usn" placeholder="USN" type="text">
  <select class="form-control input-lg" name="branch">
    <option value="Month">-- Select branch --</option>
    <option value="Month">Computer Science & Engineering</option>
    <option value="Month">Information Science & Engineering</option>
    <option value="Month">Electronics & Communication Engineering</option>
    <option value="Month">Electrical & Electronics Engineering</option>
    <option value="Month">Mechanical Engineering</option>
    <option value="Month">Civil Engineering</option>
    <option value="Month">MBA</option>
    <option value="Month">MCA</option>
  </select>
  <input class="form-control input-lg" name="contact" placeholder="Contact No." type="text">
  <input class="form-control input-lg" name="email" placeholder="E-mail" type="email">
  <input class="form-control input-lg" name="password" placeholder="Password" type="password">
</div>

score 0 · Accepted Answer · answered Mar 26 '16 at 10:22

0

I guess you need to call show method onChange event of select by doing

<select class="form-control input-lg" style="text-align:center" onchange="show(this)">

answered Mar 26 '16 at 10:22

gurvinder372

66,980
10
72
94

[Don't use `onevent` HTML attributes.](http://stackoverflow.com/a/35093997/3853934) – Michał Perłakowski Mar 26 '16 at 10:27
1

@Gothdo why not? Its simple and direct. Now since I don't know his code structure how I can tell him where to place an addEventListener code? – gurvinder372 Mar 26 '16 at 10:29
Probably a noob question but I just started working with HTML and PHP, thanks for the answer :) – Adhip Rebello Mar 26 '16 at 10:50
@gurvinder372 This method works perfectly, another problem I face is that when selecting an option for example student, I have 5 input tags for student whereas for the option company, I have only 4 input tags, the problem is that my footer keeps changing its position every time I select an option! How to fix that? – Adhip Rebello Mar 26 '16 at 15:39

score 0 · Answer 3 · answered Mar 26 '16 at 10:57

<select class="form-control input-lg" style="text-align:center" id="regType">
    <option value="type">-- Select a Type --</option>
    <option value="student">Student</option>
    <option value="company">Company</option>
</select>

<div id="blk-student" class="info-block">
your student block elements comes here
</div>

<div id="blk-company" class="info-block">
your Company block elements comes here
</div>

you can wrap divs by giving relevant ids

here goes JQuery

$(".info-block").hide(); //keeps the info blocks hidden initially
$("#regType").on("change", function() {
   $(".info-block").hide();
   $("#blk-"+$(this).val()).show();
});

How to display input options only after selecting an option from the 'select class' tag?

3 Answers3