Javascript automatic hide/show div not working
Question
I'm trying to automatically hide divs in JavaScript using the below code, such that they can only be displayed/hidden upon clicking a select option:
//hiding the divs
$(document).ready(function(){
function hide(){
$(".atm").hide();
$(".bank").hide();
}
hide();
});
For reasons unknown to me, the code does not work(the divs are still not hidden). Below is the rest of the code (it works properly, only the code above isn't hidding divs)
//here's my html code for div
<div class="atm">ATM</div>
<div class="bank">Bank</div>
//here's my select code
<select name="type" id="document-type" onchange="showOptions(this)">
<option value="ATM">ATM</option>
<option value="Bank">Bank</option>
</select>
//and here's my javascript code for displaying the hidden divs
function showOptions(s) {
var val = s.options[s.selectedIndex].value;
if(val === "ATM"){
hide();
$(".atm").slideDown(400);
}else
if(val === "Bank"){
hide();
$(".bank").slideDown(400);
}
};
Anywhere I'm going/doing wrong?
4 answers
solution1
0 2017-02-10 05:46:06
Check this answer here
$(document).ready(function(){ $(".atm").hide(); $(".bank").hide(); $('select').on('change',function(){ if($('select').val()=='atm'){ $('.atm').show(); $('.bank').hide(); } else if($('select').val()=='bank'){ $('.bank').show(); $('.atm').hide(); } }); });
<html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script></head> <body> <select><option value="atm">ATM</option><option value="bank">Bank</option></select> <div class="atm">ATM</div> <div class="bank">BANK</div>
solution2
0 2017-02-10 05:47:09
Bind a change event to your select
$(document).ready(function(){ function hide(){ $(".atm").toggle(); $(".bank").toggle(); } $('select').on('change',hide).trigger('change'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="atm">atm</div> <div class="bank">bank</div> <select> <option>select</option> <option>select</option> </select>
solution3
0 2017-02-10 05:57:36
Update to unresolved question -
Copy the following code into a text.html file and run it a browser and let us know the result:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function hide()
{
$('.atm').hide();
$('.bank').hide();
}
//and here's my javascript code for displaying the hidden divs
function showOptions(s) {
var val = s.options[s.selectedIndex].value;
if(val === "ATM"){
hide();
$(".atm").slideDown(400);
}else
if(val === "Bank"){
hide();
$(".bank").slideDown(400);
}
};
</script>
</head>
<body>
//here's my html code for div
<div class="atm">ATM</div>
<div class="bank">Bank</div>
//here's my select code
<select name="type" id="document-type" onchange="showOptions(this)">
<option value="ATM">ATM</option>
<option value="Bank">Bank</option>
</select>
</body>
</html>
Please see update at end according to question's update:
The js looks fine to me it works in example below - may be your html:
(Do your div's in html have class='atm' & class='bank' ?)
$(document).ready(function () { function hide () { $(".atm") .hide(); $(".bank").hide(); $('.btnHideShow').text('Show'); } function show () { $(".atm") .show(); $(".bank").show(); $('.btnHideShow').text('Hide'); } $('.btnHideShow').click(function () { if($('.atm').is(':hidden')) { show(); } else { hide(); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='atm'>Div ATM</div> <div class='bank'>Div Bank</div> <button class="btnHideShow">Hide</button>
Using select:
$(document).ready(function () { function hide () { $(".atm") .hide(); $(".bank").hide(); $('.btnHideShow').text('Show'); } function show () { $(".atm") .show(); $(".bank").show(); $('.btnHideShow').text('Hide'); } $('.sel').change(function () { //console.log($(this).val()); var val = $(this).val(); if(val === 'None') { hide(); } else if(val === 'Bank-ATM') { show(); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='atm'>Div ATM</div> <div class='bank'>Div Bank</div> <select class="sel"> <option>Bank-ATM</option> <option>None</option> </select>
In your update to the question you left out your hide function: (are you including jquery lib?)
function hide() { $('.atm').hide(); $('.bank').hide(); } //and here's my javascript code for displaying the hidden divs function showOptions(s) { var val = s.options[s.selectedIndex].value; if(val === "ATM"){ hide(); $(".atm").slideDown(400); }else if(val === "Bank"){ hide(); $(".bank").slideDown(400); } };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> //here's my html code for div <div class="atm">ATM</div> <div class="bank">Bank</div> //here's my select code <select name="type" id="document-type" onchange="showOptions(this)"> <option value="ATM">ATM</option> <option value="Bank">Bank</option> </select>
solution4
0 2017-02-10 06:02:43
$(document).ready(function(){
$(".atm").hide();
$(".bank").hide();
$('select').change(function(){
$(".atm").toggle();
$(".bank").toggle();
}).
});
Try this. This will hide the classess on page load and then after changing the select box it will show. toggle() function is used to hide and show the elements.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.