jQuery doesn't seem to be working on browsers
Question
I'm trying to hide/display fields according to which selection is made in a drop down menu.
The code for the jQuery doesn't seem to be taking. Any suggestions? New to jQuery. I'm saving my files as .php
jQuery:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
$(document).ready(function() {
$.viewMap = {
'0' : $([]),
'view1' : $('#view1'),
'view2' : $('#view2a, #view2b'),
'view3' : $('#view3')
};
$('#viewSelector').change(function() {
// hide all
$.each($.viewMap, function() { this.hide(); });
// show current
$.viewMap[$(this).val()].show();
});
});
</script>
</head>
html:
<select id="viewSelector">
<option value="0">-- Select a View --</option>
<option value="view1">view1</option>
<option value="view2">view2</option>
<option value="view3">view3</option>
</select>
<select id="viewSelector">
<option value="0">-- Select a View --</option>
<option value="view1">view1</option>
<option value="view2">view2</option>
<option value="view3">view3</option>
</select>
<div id="view1">
<!-- content -->
</div>
<div id="view2a">
<!-- content -->
</div>
<div id="view2b">
<!-- content -->
</div>
<div id="view3">
<!-- content -->
</div>
3 answers
solution1
2 ACCPTED 2016-01-06 13:09:22
You have a duplicate <select> . If you remove it, the view selector works:
If there are any jQuery issues occurring behind the scenes due to code outside of what you posted, press F12 in Chrome to open the DevTools , and click the Console tab to see any JavaScript errors after refreshing the page.
solution2
1 2016-01-06 13:36:42
Ids should be unique. In your code, there are 2 selects with same id viewSelector . You may remove one set.
Give each div a common class like;
<div class="views" id="view3">
Then try to hide all divs using this class. Then show the required div on drop down select. The entire code may look like;
$.viewMap = {
'0': $([]),
'view1': $('#view1'),
'view2': $('#view2a, #view2b'),
'view3': $('#view3')
};
$('#viewSelector').change(function() {
// hide all
$(".views").hide();
// show current
$.viewMap[$(this).val()].show();
});
Here is a demo. Hope this helps.
solution3
0 2016-01-06 13:09:07
Please try below code:
jQuery:
$(document).ready(function() {
$('#viewSelector').change(function() {
$('.view').hide();
// show current
if($(this).val() !== 0){
if($(this).val() == "view2"){
$("#view2a, #view2b").show();
}else{
$("#"+ $(this).val()).show();
}
}
});
});
HTML:
<select id="viewSelector">
<option value="0">-- Select a View --</option>
<option value="view1">view1</option>
<option value="view2">view2</option>
<option value="view3">view3</option>
</select>
<div id="view1" class="view">
<!-- content -->
</div>
<div id="view2a" class="view">
<!-- content -->
</div>
<div id="view2b" class="view">
<!-- content -->
</div>
<div id="view3" class="view">
<!-- content -->
</div>
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.