如何使用jquery基于下拉选择来打印值？

Question

以下是我的代码，该代码显示JSON变量中的电影数据，并根据所选城市将其显示在下拉列表中。

我需要显示用户何时在电影下拉菜单中选择电影以打印电影名称和剧院列表以及剧院下拉菜单。

并选择一个下拉菜单，其他下拉菜单请不要更改（当用户选择电影下拉菜单时，剧院下拉菜单是默认状态，也可以是另一种状态）

下面是我的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> 

Answer 1

 $(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>