javascript - How to use if else statements in select form? - Stack Overflow

In my registration page, I'm gonna use two drop-down select that one of them should be hidden if its Negative and if its positive new drop-down will open to choose ...

In mysql table I've table as diabetes name with enom

enum('negative', 'insulin', 'drug', 'ndm', 'mody', '')

Here's my code:

<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes">
<option value="negative">Negative</option>
<option value="">Positive</option>
</select>
</div>



<div><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>

In my registration page, I'm gonna use two drop-down select that one of them should be hidden if its Negative and if its positive new drop-down will open to choose ...

In mysql table I've table as diabetes name with enom

enum('negative', 'insulin', 'drug', 'ndm', 'mody', '')

Here's my code:

<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes">
<option value="negative">Negative</option>
<option value="">Positive</option>
</select>
</div>



<div><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>

For example: If Diabetes is negative value is negative as default then Diabetes Type is hidden

and

If Diabetes is positive then Diabetes type will be appeared to choose items.

those values like insulin, drug, mdm, mody should be inserted into this:

value="positive"

How can I make it through java script?

I can't add class or div or span. Is it possible just through JavaScript using ??

Thank you so much

• javascript
• forms
• drop-down-menu

Share Follow edited Oct 31, 2015 at 16:35 Alexander Richard asked Oct 31, 2015 at 16:20 Alexander RichardAlexander Richard 19144 gold badges88 silver badges1818 bronze badges 2

• so if value is positive you can choose from the list right ? – Endrit Shala Commented Oct 31, 2015 at 16:22
• so if Diabetes is positive should be second drop-down will be appeared to choose those values. like insulin, mody and .... – Alexander Richard Commented Oct 31, 2015 at 16:26

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

Use jquery, it is paratively easier.

$(document).ready(function(){
 $("#diabetestype").hide();
 $("#diabetes").on("change", function(){
   var v = $(this).val();
   if(v=="positive"){
      $("#diabetestype").show();
   }else{
     $("#diabetestype").hide();
   } 
 });
});

To make this code workable, you need to add value of Positive option also. So instead value="" change it to value="positive".

You can even hide the label also:

$(document).ready(function(){
 $("#diabetestype").closest("div").hide();
 $("#diabetes").on("change", function(){
   var v = $(this).val();
   if(v=="positive"){
      $("#diabetestype").closest("div").show();
   }else{
     $("#diabetestype").closest("div").hide();
   } 
 });
});

<div><label for="diabetes">Diabetes:</label>
  <select id="diabet" name="diabet" onchange="checkDiabet();">
    <option value="negative">Negative</option>
    <option value="positive" id="isDiabet">Positive</option>
  </select>
</div>

<div id="type" style="display: hidden;">
  <label for="diabetestype">Diabetes Type:</label>
  <select id="diabetestype" name="diabetestype">
    <option value="insulin">Insulin</option>
    <option value="drug">Drug</option>
    <option value="ndm">NDM</option>
    <option value="mody">MODY</option>
  </select>
</div>

<script>
function checkDiabet() {
  var isDiabet = document.getElementById("isDiabet").selected;
  if (isDiabet == true) { document.getElementById("type").removeAttribute("style"); }
  else { document.getElementById("type").style.display = "none"; }
}
</script>

First, set the first select to fire the function checkDiabet() by the attribute onchange. Then give the option an id, which needs to be checked, so you can access it easily.

Then, set the second select to display: none This could be done in a CSS header or file, or like in this case inline. (div style=""), also add an id to access it easily. (div id="type")

Now es the function checkDiabete(). It checks if the select is selected (can be true or false (bool)). Is selected => show (div id="type"), if not, hide this div (and all of it's contents)
(if is already hidden, it then overwrites the (style="display: none;") with (style="display: none;))

That's it! :)

Try this:

function SelectDiabetes() {
  var d = document.getElementById("diabetes").value;
  var dType = document.getElementById("diabetestypebox");
  if(d == "negative")
    dType.style.display = "none";
  else
    dType.style.display = "block";
}

SelectDiabetes();

<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes" onchange="SelectDiabetes(this.value);">
<option value="negative">Negative</option>
<option value="positive">Positive</option>
</select>
</div>



<div id="diabetestypebox"><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>

Call a js function onchange of select id diabetes

<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes" onchange="toggleTypes()">
<option value="negative">Negative</option>
<option value="">Positive</option>
</select>
</div>



<div><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" style="display:none" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>

Use the following javascript

function toggleTypes(){
  var el=document.getElementById('diabetes');
  var medElem=document.getElementById('diabetestype');
  if(el.value=='positive') {
    medElem.style.display='block';
  } else {
    medElem.style.display='none';
  }
}