hide/show div depending on option

Question

i am very confused why is this it doesn't show my div. This is just a simple idea, i have two divs which is :

<div id="custom-report">
</div>

<div id="daily-report">
</div>

now, i have a select which select when i want to hide or show them:

<select class="form-control" id="selectedrep">
    <option value="0">--- SELECT OPTION ---</option>
    <option value="1">Daily</option>
    <option value="2">Custom</option>
</select>

and i am doing my javascript like this:

$('#selectedrep').change(function(){
    var selectedReport = $(this).val();
    if(selectedReport == 1) {
      document.getElementById('daily-report').style.display = "block";
      document.getElementById('custom-report').style.display = '';
      alert("daily");
    }
    if(selectedReport == 2) {
      document.getElementById('custom-report').style.display = "block";
      document.getElementById('daily-report').style.display = '';
      alert('custom');
    }
    else {
      document.getElementById('custom-report').style.display = "none"; 
      document.getElementById('daily-report').style.display = "none";
    }
});

and also first, i will hide them all with my css with this:

#custom-report {
    display: none;
}
#daily-report {
    display: none;
}

why is it, when i go navigate to daily, it will show, and just vanished. and if i go navigate for custom, it will show my div correctly.

Answer 1

In your second condition, you should have else if instead of if

Else condition is only considered when second if condition fails, not every time. if....else if...else flow would solve this problem.

 $('#selectedrep').change(function() { var selectedReport = $(this).val(); if (selectedReport == 1) { document.getElementById('daily-report').style.display = "block"; document.getElementById('custom-report').style.display = ''; } else if (selectedReport == 2) { document.getElementById('custom-report').style.display = "block"; document.getElementById('daily-report').style.display = ''; } else { document.getElementById('custom-report').style.display = "none"; document.getElementById('daily-report').style.display = "none"; } }); 

 #custom-report { display: none; } #daily-report { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="custom-report"> CUSTOM </div> <div id="daily-report"> DAILY </div> <select class="form-control" id="selectedrep"> <option value="0">--- SELECT OPTION ---</option> <option value="1">Daily</option> <option value="2">Custom</option> </select> 

Simplified code -

 $('#selectedrep').change(function() { var selectedReport = this.value; document.getElementById('custom-report').style.display = "none"; document.getElementById('daily-report').style.display = "none"; if (selectedReport == 1) { document.getElementById('daily-report').style.display = "block"; } else if (selectedReport == 2) { document.getElementById('custom-report').style.display = "block"; } }); 

 #custom-report { display: none; } #daily-report { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="custom-report"> CUSTOM </div> <div id="daily-report"> DAILY </div> <select class="form-control" id="selectedrep"> <option value="0">--- SELECT OPTION ---</option> <option value="1">Daily</option> <option value="2">Custom</option> </select> 

Using jQuery(No need to have css ) -

 $('#selectedrep').change(function() { var selectedReport = this.value; var custom = $('#custom-report'); var daily = $('#daily-report'); custom.add(daily).hide() if (selectedReport == 1) { daily.show(); } else if (selectedReport == 2) { custom.show(); } }).change(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="custom-report"> CUSTOM </div> <div id="daily-report"> DAILY </div> <select class="form-control" id="selectedrep"> <option value="0">--- SELECT OPTION ---</option> <option value="1">Daily</option> <option value="2">Custom</option> </select> 

Answer 2

You have done mistake in if else . In your second condition you have to use if else instead of only if . Please follow below code::

 $('#selectedrep').change(function(){ var selectedReport = $(this).val(); if(selectedReport == 1) { document.getElementById('daily-report').style.display = "block"; document.getElementById('custom-report').style.display = ''; alert("daily"); } else if(selectedReport == 2) { document.getElementById('custom-report').style.display = "block"; document.getElementById('daily-report').style.display = ''; alert('custom'); } else { document.getElementById('custom-report').style.display = "none"; document.getElementById('daily-report').style.display = "none"; } }); 

 #custom-report { display: none; } #daily-report { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="custom-report"> Custom Report </div> <div id="daily-report"> Daily Report </div> <select class="form-control" id="selectedrep"> <option value="0">--- SELECT OPTION ---</option> <option value="1">Daily</option> <option value="2">Custom</option> </select> 

Also just one thing As you are using jQuery onchange event you can use jQuery for hide and show . Please follow working jsfiddle link:: link

Answer 3

Why cant you add "else" infront of IF statement, this may be your problem.

$('#selectedrep').change(function(){
    var selectedReport = $(this).val();
    if(selectedReport == 1) {
      document.getElementById('custom-report').style.display = 'none';
      document.getElementById('daily-report').style.display = "block";
      alert("daily");
}
else if(selectedReport == 2) {  
     document.getElementById('daily-report').style.display = 'none';
     document.getElementById('custom-report').style.display = "block";
     alert('custom');
}
else {
     document.getElementById('custom-report').style.display = "none"; 
     document.getElementById('daily-report').style.display = "none";
}
});

Answer 4

In your second condition, you should have else if instead of if

Complete jQuery solution based on the fact you have $('#selectedrep').change() as your function.

$('#selectedrep').change(function() {
  var selectedReport = $(this).val();
  if (selectedReport == 1) {
    $('#daily-report').show();
    $('#custom-report').hide();
  } else if (selectedReport == 2) {
    $('#custom-report').show();
    $('#daily-report').hide();
  } else {
    $('#custom-report').hide();
    $('#daily-report').hide();
  }
});

Answer 5

$("#selectdrep").on("click",function(){
    var selectedvalue = $(this).val();
    if(selectedvalue == "1"){
        document.getElementById("custom-report").style.display = "block";
        document.getElementById("daily-report").style.display = "none";
    }else if(selectedvalue == "2"){
        document.getElementById("daily-report").style.display = "block";
        document.getElementById("custom-report").style.display = "none";
    }else{
        document.getElementById("custom-report").style.display = "none";
        document.getElementById("daily-report").style.display = "none";
    }
})

Answer 6

Or you could get rid of the if..else altogether:

$("#selectdrep").on("click",function(){
    var selectedvalue = $(this).val();
    document.getElementById("custom-report").style.display = selectvalue == 1 ? "block" : "none";
    document.getElementById("daily-report").style.display = selectvalue == 2 ? "block" : "none";
})