My website has 3 services, I want to be able to click on service 1 and see menu 1, click on service 2 and see menu 2, click on service 3 and see menu 3. I have the following code but it is not working as expected. When I click on service 2 and service 3, nothing shows up.
HTML :
<div class="row" id="menu_service1">
<div class="col-md-4">
<span><h5>Choose a line</h5> <select id="lines" class="form-control"></select></span>
<span><h5>Choose a stop</h5> <select id="stop" class="form-control"></select></span>
</div>
</div>
<div class="row" id="menu_service2">
<div class="col-md-4">
<span><h5>Choose a stop</h5> <select id="stop" class="form-control"></select></span>
<span><h5>Choose a stop</h5> <select id="stop" class="form-control"></select></span>
</div>
</div>
<div class="row" id="menu_service3">
<div class="col-md-4">
<p>blah</p>
</div>
</div>
JS :
$(document).ready(function() {
var line_array = ["Line 1", "Line 2", "Line 3"];
var stops = ["stop1", "stop2", "stop3"] ;
for (var i = 0; i < line_array.length; i++) {
$('#lines').append('<option>' + line_array[i] + '</option>');
}
for (var i = 0; i < stops.length; i++) {
$('#stop').append('<option>' + stops[i] + '</option>');
}
$('#menu_service1').hide();
$('#menu_service2').hide();
$('#menu_service3').hide();
$('#Service_1').click(function() {
$('#menu_service1').toggle();
});
$('#Service_2').click(function() {
$('#menu_service2').toggle();
});
$('#Service_3').click(function() {
$('#menu_service3').toggle();
});
});
id
should be unique in same document, so try to replace the duplicated ones by general classes, eg:
<span><h5>Choose a line</h5> <select class="form-control lines"></select></span>
<span><h5>Choose a stop</h5> <select class="form-control stop"></select></span>
And in your JS use them with class selector dot .
, like :
$('.lines').append('<option>' + line_array[i] + '</option>');
You should also fix the typos in the following two lines by adding id selector sogn #
:
$('menu_service2').toggle();
$('menu_service2').toggle();
Should be :
$('#menu_service2').toggle();
$('#menu_service2').toggle();
Also you could use comma ,
separator for multiple selectors, so instead of :
$('#menu_service1').hide();
$('#menu_service2').hide();
$('#menu_service3').hide();
Use just :
$('#menu_service1,#menu_service2,#menu_service3').hide();
Hope this helps.
$(document).ready(function() { var line_array = ["Line 1", "Line 2", "Line 3"]; var stops = ["stop1", "stop2", "stop3"] ; for (var i = 0; i < line_array.length; i++) { $('.lines').append('<option>' + line_array[i] + '</option>'); } for (var i = 0; i < stops.length; i++) { $('.stop').append('<option>' + stops[i] + '</option>'); } $('#menu_service1,#menu_service2,#menu_service3').hide(); $('#Service_1').click(function() { $('.row').hide(); $('#menu_service1').toggle(); }); $('#Service_2').click(function() { $('.row').hide(); $('#menu_service2').toggle(); }); $('#Service_3').click(function() { $('.row').hide(); $('#menu_service3').toggle(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <button id='Service_1'>Service 1</button> <button id='Service_2'>Service 2</button> <button id='Service_3'>Service 3</button> <div class="row" id="menu_service1"> <div class="col-md-4"> <span><h5>Choose a line1</h5> <select class="form-control lines"></select></span> <span><h5>Choose a stop1</h5> <select class="form-control stop"></select></span> </div> </div> <div class="row" id="menu_service2"> <div class="col-md-4"> <span><h5>Choose a line2</h5> <select class="form-control lines"></select></span> <span><h5>Choose a stop2</h5> <select class="form-control stop"></select></span> </div> </div> <div class="row" id="menu_service3"> <div class="col-md-4"> <p>blah</p> </div> </div>
You forgot the # sign in front of the id's in your selectors.
$('#menu_service2').toggle();
$('#menu_service3').toggle();
I prefer to write less lines of code to obtain the same result.
$(function () { var line_array = ["Line 1", "Line 2", "Line 3"]; var stops = ["stop1", "stop2", "stop3"] ; for (var i = 0; i < line_array.length; i++) { $('[id^=lines]').append('<option>' + line_array[i] + '</option>'); } for (var i = 0; i < stops.length; i++) { $('[id^=stop]').append('<option>' + stops[i] + '</option>'); } $('[id^=menu_service]').hide(); $('[id^=Service_]').click(function() { var currDiv = this.getAttribute('data-div'); $('div.row:not(#' + currDiv + ')').hide(); $('#' + currDiv).toggle(); }); });
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <button id='Service_1' data-div="menu_service1">Service 1</button> <button id='Service_2' data-div="menu_service2">Service 2</button> <button id='Service_3' data-div="menu_service3">Service 3</button> <div class="row" id="menu_service1"> <div class="col-md-4"> <span><h5>Choose a line</h5> <select id="lines1" class="form-control"></select></span> <span><h5>Choose a stop</h5> <select id="stop1" class="form-control"></select></span> </div> </div> <div class="row" id="menu_service2"> <div class="col-md-4"> <span><h5>Choose a stop</h5> <select id="stop2" class="form-control"></select></span> <span><h5>Choose a stop</h5> <select id="stop2" class="form-control"></select></span> </div> </div> <div class="row" id="menu_service3"> <div class="col-md-4"> <p>blah</p> </div> </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.