How to filter the values based on selection using jquery?

Question

I have two drop downs one for movies and another for theaters when i select the movie in first drop down to print the selected movie and which theater the movie is playing and same as select the theater to print the theater and which movie playing that theater ?

how to do that one ....

 $(document).ready(function() { var cityData = [{ cityName: 'Bengaluru', value: "Bengaluru", data: [{ movieName: 'ABC', theaterName: 'Tulsi Theatre' }, { movieName: 'DEF', theaterName: 'PVR' }, { movieName: 'GHI', theaterName: 'Srinivasa Theatre' } ] }, { cityName: 'Hyderabad', value: "Hyderabad", data: [{ movieName: '123', theaterName: 'Theatre1' }, { movieName: '456', theaterName: 'PVR2' }, { movieName: '789', theaterName: 'Theatre3' } ] }, { cityName: 'Guntur', value: "Guntur", data: [{ movieName: 'ABC1', theaterName: 'Theatre4' }, { movieName: 'DEF2', theaterName: 'PVR3' }, { movieName: 'GHI3', theaterName: 'Theatre5' } ] }, { cityName: 'Ongole', value: "Ongole", data: [] } ]; $("#selectCity").on('change', function() { var locations = cityData.filter(c => c.cityName === $(this).val())[0].data; var locationString = ''; var locationString2 = ''; $.each(locations, function(i, item) { locationString += '<option value="' + item.theaterName + '">' + item.theaterName + '</option>'; locationString2 += '<option value="' + item.movieName + '">' + item.movieName + '</option>'; }); $('#secondselectbox').html(locationString); $('#thirdselectbox').html(locationString2); }); $("#thirdselectbox, #secondselectbox, #selectCity").on("change", function() { $("span#selectedMovie").text($("#thirdselectbox").val()); $("span#selectedTheater").text($("#secondselectbox").val()); }); });

 <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <div class="UserData"> <h1><a href="#">Booking</a></h1> <select class="selectCity" id="selectCity"> <option value="City">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> <select class="selectTheater" id="secondselectbox"> </select> <select class="selectMovie" id="thirdselectbox"> </select> </div> <fieldset style="margin-top:20px;"> <legend>Your Selection</legend> <div>Theater: <span id="selectedTheater"></span></div> <div>Movie: <span id="selectedMovie"></span></div> </fieldset>

how to filter the values based on selection

when i am selecting the movie to print the movie name and which theater the movie is playing as same as selection of theater.

and how to store the selected values in local storage.

Answer 1

Lets Solve the problem step by step

Note : I will use your code , I won't invent my own

• first : we will make one change method for every select element to make our code better like this

   // city selection $('#selectCity').on('change', function() {}); // theater selection $('#secondselectbox').on('change', function() {}); // Movie selection $('#thirdselectbox').on('change', function() {});

• second: we will make the locations variable global so that we can track the current selected data in the other methods so on top of the methods above we make this change

  var locations = [] ;

• third : we have a small error happens when when we select a city then we select the option Select City we get the error

  can read data of undefined

so to solve it we just need to check that the user does not select the select city option like this .

 $('#selectCity').on('change', function() {
    if ( $(this).val().indexOf('City') === -1) {
               // here our logic 
            }
      });

• finally : when the user select a movie or a theater we go all the elements of our locations and check if the current element has the movie or the theater we selected and based on that we change our data

Here is the full code for the solution I wrote so comments some you understand it if you have anything you don't understand I am here to help . Hope this helps you

 $(document).ready(function() { var cityData = [ { cityName: 'Bengaluru', value: 'Bengaluru', data: [ { movieName: 'ABC', theaterName: 'Tulsi Theatre', }, { movieName: 'DEF', theaterName: 'PVR', }, { movieName: 'GHI', theaterName: 'Srinivasa Theatre', }, ], }, { cityName: 'Hyderabad', value: 'Hyderabad', data: [ { movieName: '123', theaterName: 'Theatre1', }, { movieName: '456', theaterName: 'PVR2', }, { movieName: '789', theaterName: 'Theatre3', }, ], }, { cityName: 'Guntur', value: 'Guntur', data: [ { movieName: 'ABC1', theaterName: 'Theatre4', }, { movieName: 'DEF2', theaterName: 'PVR3', }, { movieName: 'GHI3', theaterName: 'Theatre5', }, ], }, { cityName: 'Ongole', value: 'Ongole', data: [], }, ]; // make locations global to track it 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 = ''; $.each(locations, function(i, item) { locationString += '<option value="' + item.theaterName + '">' + item.theaterName + '</option>'; locationString2 += '<option value="' + item.movieName + '">' + item.movieName + '</option>'; }); $('#secondselectbox').html(locationString); $('#thirdselectbox').html(locationString2); // here we change the values of the current movie and theater $('span#selectedMovie').text($('#thirdselectbox').val()); $('span#selectedTheater').text($('#secondselectbox').val()); } }); $('#secondselectbox').on('change', function() { // here the theater change // get the selected value var theater = $(this).val(); // here we need to go through every element in locations for(var i in locations){ // checks if the current element // check if its theater equal current theater // chenage the values if(locations[i].theaterName===theater){ // here we change the data $('span#selectedTheater').text(theater); $('span#selectedMovie').text(locations[i].movieName); $('#thirdselectbox').val(locations[i].movieName); } } }); $('#thirdselectbox').on('change', function() { // here the movie change // get the selected value var movie = $(this).val(); // here we need to go through every element in locations for(var i in locations){ // checks if the current element // check if its movie equal current movie // chenage the values if(locations[i].movieName===movie){ // here we change the data $('span#selectedMovie').text(movie); $('span#selectedTheater').text(locations[i].theaterName); // also we need the change the selection value $('#secondselectbox').val(locations[i].theaterName); } } }); });

 <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <div class="UserData"> <h1><a href="#">Booking</a></h1> <select class="selectCity" id="selectCity"> <option value="City">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> <select class="selectTheater" id="secondselectbox"> </select> <select class="selectMovie" id="thirdselectbox"> </select> </div> <fieldset style="margin-top:20px;"> <legend>Your Selection</legend> <div>Theater: <span id="selectedTheater"></span></div> <div>Movie: <span id="selectedMovie"></span></div> </fieldset>

Answer 2

Track your control's onchange event. Then do the second process.

Example:

$("#dropdownId").on('change', function() {

  //do the necessary process here

});