How to print the values based on drop down selection using jquery?

Question

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.

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

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