[英]How to print the values based on drop down selection using jquery?
Below is my code that shows movie data from the JSON variable, and displays it on the drop down list based on the selected city. 以下是我的代码,该代码显示JSON变量中的电影数据,并根据所选城市将其显示在下拉列表中。
I need to show the when user select the movie in movies drop down to print the movie name and theaters list as well as theater drop down.. 我需要显示用户何时在电影下拉菜单中选择电影以打印电影名称和剧院列表以及剧院下拉菜单。
and select one drop down another drop down don't change(when user select the movie drop down the theater drop down is default state as well as another ) 并选择一个下拉菜单,其他下拉菜单请不要更改(当用户选择电影下拉菜单时,剧院下拉菜单是默认状态,也可以是另一种状态)
below is my html 下面是我的HTML
$(document).ready(function() { var cityData = [ { cityName: 'Bengaluru', value: 'Bengaluru', data: [ { movieName: 'ABC', theaterName: 'Tulsi Theatre', showTImings:['8:00AM','12:00PM','4:00PM','9:00PM'] }, { movieName: 'DEF', theaterName: 'PVR', showTImings:['8:00AM','12:00PM','4:00PM','9:00PM'] }, { movieName: 'GHI', theaterName: 'Srinivasa Theatre', showTImings:['8:00AM','12:00PM','4:00PM','9:00PM'] }, ], }, { cityName: 'Hyderabad', value: 'Hyderabad', data: [ { movieName: '123', theaterName: 'Theatre1', showTImings:['8:00AM','12:00PM','4:00PM','9:00PM'] }, { movieName: '456', theaterName: 'PVR2', showTImings:['8:00AM','12:00PM','4:00PM','9:00PM'] }, { movieName: '789', theaterName: 'Theatre3', showTImings:['8:00AM','12:00PM','4:00PM','9:00PM'] }, ], }, { cityName: 'Guntur', value: 'Guntur', data: [ { movieName: 'ABC1', theaterName: 'Theatre4', showTImings:['8:00AM','12:00PM','4:00PM','9:00PM'] }, { movieName: 'DEF2', theaterName: 'PVR3', showTImings:['8:00AM','12:00PM','4:00PM','9:00PM'] }, { movieName: 'GHI3', theaterName: 'Theatre5', showTImings:['8:00AM','12:00PM','4:00PM','9:00PM'] }, ], }, { cityName: 'Ongole', value: 'Ongole', data: [], }, ]; var locations = [] ; $('#selectCity').on('change', function() { if ($(this).val().indexOf('City') === -1) { locations = cityData.filter( c => c.cityName === $(this).val(),)[0].data; var locationString = ''; var locationString2 = ''; if(locations.length == 0){ $('#showTimings').html('No shows available'); } $.each(locations, function(i, item) { locationString +='<option value="' +item.theaterName +'">' +item.theaterName +'</option>'; locationString2 +='<option value="' +item.movieName +'">' +item.movieName +'</option>'; $('#showTimings').html(''); $.each(locations[i].showTImings,function(i,v){ var button = $('<button />').html(v); $('#showTimings').append(button); }); }); $('#secondselectbox').html(locationString); $('#thirdselectbox').html(locationString2); $('span#selectedMovie').text($('#thirdselectbox').val()); $('span#selectedTheater').text($('#secondselectbox').val()); } }); $('#secondselectbox').on('change', function() { var theater = $(this).val(); for(var i in locations){ if(locations[i].theaterName===theater){ $('span#selectedTheater').text(theater); $('span#selectedMovie').text(locations[i].movieName); $('#thirdselectbox').val(locations[i].movieName); $('#showTimings').html(''); $.each(locations[i].showTImings,function(i,v){ var button = $('<button />').html(v); $('#showTimings').append(button); }); } } }); $('#thirdselectbox').on('change', function() { var movie = $(this).val(); for(var i in locations){ if(locations[i].movieName===movie){ $('span#selectedMovie').text(movie); $('span#selectedTheater').text(locations[i].theaterName); $('#secondselectbox').val(locations[i].theaterName); $('#showTimings').html(''); $.each(locations[i].showTImings,function(i,v){ var button = $('<button />').html(v); $('#showTimings').append(button); }); } } }); });
<div class="UserData"> <h1><a href="moviebooking.html">MyMovie-Ticket-Booking</a></h1> <select class="selectCity" id="selectCity"> <option value="">Select City</option> <option value="Bengaluru">Bengaluru</option> <option value="Hyderabad">Hyderabad</option> <option value="Guntur">Guntur</option> <option value="Ongole">Ongole</option> </select> <span id="welcome"> </span> <p id="demo" class="cityName"></p> </div> <div class="MoviesList" id="List"> <label class="TitleName">Movie Name:</label> <select id="thirdselectbox" class="TheaterList"> <option selected="selected"> Select Movie </option> </select> <label class="TitleName">Theater Name:</label> <select id="secondselectbox" class="MovieList"> <option selected="selected"> Select Theater </option> </select> <fieldset class="Container"> <legend class="selection">Your Selection</legend> <div class="TmName"> Theater: <span id="selectedTheater"></span> <div id="showTimings" style="width: 30%;margin: 0 auto;"> <!--<button class="movieTimings"></button> <button class="movieTimings"></button> <button class="movieTimings"></button> <button class="movieTimings"></button>--> </div> Movie: <span id="selectedMovie"></span> </div> </fieldset> </div>
$(document).ready(function() { var cityData = [ { cityName: 'Bengaluru', value: 'Bengaluru', data: [ { movieName: 'ABC', theaterName: 'Tulsi Theatre', showTImings:['8:00AM','12:00PM','4:00PM','9:00PM'] }, { movieName: 'DEF', theaterName: 'PVR', showTImings:['8:00AM','12:00PM','4:00PM','9:00PM'] }, { movieName: 'GHI', theaterName: 'Srinivasa Theatre', showTImings:['8:00AM','12:00PM','4:00PM','9:00PM'] }, ], }, { cityName: 'Hyderabad', value: 'Hyderabad', data: [ { movieName: '123', theaterName: 'Theatre1', showTImings:['8:00AM','12:00PM','4:00PM','9:00PM'] }, { movieName: '456', theaterName: 'PVR2', showTImings:['8:00AM','12:00PM','4:00PM','9:00PM'] }, { movieName: '789', theaterName: 'Theatre3', showTImings:['8:00AM','12:00PM','4:00PM','9:00PM'] }, ], }, { cityName: 'Guntur', value: 'Guntur', data: [ { movieName: 'ABC1', theaterName: 'Theatre4', showTImings:['8:00AM','12:00PM','4:00PM','9:00PM'] }, { movieName: 'DEF2', theaterName: 'PVR3', showTImings:['8:00AM','12:00PM','4:00PM','9:00PM'] }, { movieName: 'GHI3', theaterName: 'Theatre5', showTImings:['8:00AM','12:00PM','4:00PM','9:00PM'] }, ], }, { cityName: 'Ongole', value: 'Ongole', data: [], }, ]; var locations = [] ; $('#selectCity').on('change', function() { if ($(this).val().indexOf('City') === -1) { locations = cityData.filter( c => c.cityName === $(this).val(),)[0].data; var locationString = ''; var locationString2 = ''; if(locations.length == 0){ $('#showTimings').html('No shows available'); } $.each(locations, function(i, item) { locationString +='<option value="' +item.theaterName +'">' +item.theaterName +'</option>'; locationString2 +='<option value="' +item.movieName +'">' +item.movieName +'</option>'; $('#showTimings').html(''); $.each(locations[i].showTImings,function(i,v){ var button = $('<button />').html(v); $('#showTimings').append(button); }); }); $('#secondselectbox').html(locationString); $('#thirdselectbox').html(locationString2); $('span#selectedMovie').text($('#thirdselectbox').val()); $('span#selectedTheater').text($('#secondselectbox').val()); } }); $('#secondselectbox').on('change', function() { var theater = $(this).val(); for(var i in locations){ if(locations[i].theaterName===theater){ $('span#selectedTheater').text(theater); $('span#selectedMovie').text(locations[i].movieName); $('#thirdselectbox').val(locations[i].movieName); $('#showTimings').html(''); $.each(locations[i].showTImings,function(i,v){ var button = $('<button />').html(v); $('#showTimings').append(button); }); } } }); $('#thirdselectbox').on('change', function() { var movie = $(this).val(); for(var i in locations){ if(locations[i].movieName===movie){ $('span#selectedMovie').text(movie); $('span#selectedTheater').text(locations[i].theaterName); $('#secondselectbox').val(locations[i].theaterName); $('#showTimings').html(''); $.each(locations[i].showTImings,function(i,v){ var button = $('<button />').html(v); $('#showTimings').append(button); }); } } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="UserData"> <h1><a href="moviebooking.html">MyMovie-Ticket-Booking</a></h1> <select class="selectCity" id="selectCity"> <option value="">Select City</option> <option value="Bengaluru">Bengaluru</option> <option value="Hyderabad">Hyderabad</option> <option value="Guntur">Guntur</option> <option value="Ongole">Ongole</option> </select> <span id="welcome"> </span> <p id="demo" class="cityName"></p> </div> <div class="MoviesList" id="List"> <label class="TitleName">Movie Name:</label> <select id="thirdselectbox" class="TheaterList"> <option selected="selected"> Select Movie </option> </select> <label class="TitleName">Theater Name:</label> <select id="secondselectbox" class="MovieList"> <option selected="selected"> Select Theater </option> </select> <fieldset class="Container"> <legend class="selection">Your Selection</legend> <div class="TmName"> Theater: <span id="selectedTheater"></span> <div id="showTimings" style="width: 30%;margin: 0 auto;"> <!--<button class="movieTimings"></button> <button class="movieTimings"></button> <button class="movieTimings"></button> <button class="movieTimings"></button>--> </div> Movie: <span id="selectedMovie"></span> </div> </fieldset> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.