CODEWITHSUNDEEP
javascripthtmlangularjs
Keshav Desai
Keshav Desai

Reputation: 23

How to populate values in other Dropdowns based on selected values in another Dropdown

I have 4 dropdown boxes.

Namely city, theater,showtime,showdate.

Presently my code is populating vlaues like,

based on selected city it populates values in theater, showdate and showtime.

What i want to do is

Based on slected city populate theater

then baesd on that slected theater populate values in showtime and showdate.

How achieve this?

in html

<div class="form-group col-lg-12" ng-class="{ 'has-error' : bookticket.city.$invalid && (bookticket.city.$dirty || submitted)}">
                    <label>Select City</label>
                    <select name="city" class="form-control"
                            ng-model="city"
                            ng-options="city for city in cityList"
                            ng-required="true" >
							 
					  <option value="">Select </option> 
                     </select>
				   <span class="help-block" ng-show="bookticket.city.$invalid && bookticket.city.$error.required && (bookticket.city.$dirty || submitted)" >City Name is required.</span> 
         </div>
		 
		 <div class="form-group col-lg-12" ng-class="{ 'has-error' : bookticket.theater.$invalid && (bookticket.theater.$dirty || submitted)}">
                    <label>Select Theater </label>
                    <select name="theater" class="form-control"
                            ng-model="theater"
                            ng-options="theater for theater in selectedtheater"
                            ng-required="true">
						 <option value="">Select </option> 
                   </select>
				  <span ng-show="bookticket.theater.$invalid && bookticket.theater.$error.required && (bookticket.theater.$dirty || submitted)" class="help-block">Theater Name is required.</span> 
         </div>
		
         <div class="form-group col-lg-6" ng-class="{ 'has-error' : bookticket.showdate.$invalid && (bookticket.showdate.$dirty || submitted)}">
                    <label>Select Show Date </label>
                    <select name="showdate" class="form-control"
                            ng-model="showdate"
                            ng-options="showdate for showdate in selectedshowdate"
                            ng-required="true">
						 <option value="">Select </option> 	 
                   </select>
				   <span ng-show="bookticket.showdate.$invalid && bookticket.showdate.$error.required && (bookticket.showdate.$dirty || submitted)" class="help-block">Show Date is required.</span>
         </div>
		
		 <div class="form-group col-lg-6" ng-class="{ 'has-error' : bookticket.showtime.$invalid && (bookticket.showtime.$dirty || submitted)}">
                    <label>Select Show Time </label>
                    <select name="showtime" class="form-control"
                            ng-model="showtime"
                            ng-options="showtime for showtime in selectedshowtime"
                           ng-required="true">
					   <option value="">Select </option> 		 
                   </select>
				<span ng-show="bookticket.showtime.$invalid && bookticket.showtime.$error.required && (bookticket.showtime.$dirty || submitted)" class="help-block">Show Time is required.</span>
         </div>

controller code is

 $scope.cityList = [
                         'BANGLORE',
                         'TUMKUR',
	                     'MYSORE'
                      ];
                      
$scope.theaterList = [
                         { name:'BANGLORE',values: ['ABC THEATER (BANGLORE,RAJAJINAGAR)','DEF THEATER (BANGLORE,VIJAYNAGAR)'] },
                         { name:'TUMKUR',  values: ['HOME THEATER (TUMKUR,TUMKUR STREET)'] },
	                     { name:'MYSORE',  values: ['MYSORE THEATER (MYSORE ROAD, MYSORE)'] }
                      ];
 
  $scope.city = "";
  $scope.theater = "";
  $scope.selectedtheater =[]; 
  $scope.$watch('city', function(newValue) {
            for (var i = 0; i < $scope.theaterList.length; i++){
              if ($scope.theaterList[i].name === newValue){
                $scope.selectedtheater = $scope.theaterList[i].values;
              }
            }
          });
          
          
  $scope.showdateList = [
                         {name:'BANGLORE', values:  ['1-MAR-2017','2-MAR-2017','3-MAR-2017'] },
                         {name:'TUMKUR',   values:  ['10-APR-2017','11-APR-2017'] },
	                     {name:'MYSORE',   values:  ['13-JUNE-2017','14-JUNE-2017']  }
                        ];				  
					  
 
  $scope.city = "";
  $scope.showdate = "";
  $scope.selectedshowdate =[]; 
  $scope.$watch('city', function(newValue) {
            for (var i = 0; i < $scope.showdateList.length; i++){
              if ($scope.showdateList[i].name === newValue){
                $scope.selectedshowdate = $scope.showdateList[i].values;
              }
            }
          });
  
 
 
 $scope.showtimeList = [
                         {name:'BANGLORE', values: ['10 AM','11 AM','2 PM'] },
                         {name:'TUMKUR', values: ['9 AM','10 AM','4 PM']  },
	                     {name:'MYSORE', values: ['9 AM','3 PM']  }
                      ];
	
$scope.city = "";
  $scope.showtime = "";
  $scope.selectedshowtime =[]; 
  $scope.$watch('city', function(newValue) {
            for (var i = 0; i < $scope.showtimeList.length; i++){
              if ($scope.showtimeList[i].name === newValue){
                $scope.selectedshowtime = $scope.showtimeList[i].values;
              }
            }
          });

Upvotes: 0

Views: 111

Answers (2)

Ankit Vadi
Ankit Vadi

Reputation: 475

First most thing you will need theaters as per your city. Date must be as per your theater, because it is not necessary that theaters in city shows movie all dates. Time will be based on Date and Theater, because every theater can have different number of shows in a day. I have created $scope.theaterTime for theaters data. I have created Demo Here:

https://plnkr.co/edit/lZIMdTaDEiBgbvh34mJ5?p=preview

This will work fine if you have small amount of Data for theaters. If you have large data of theaters, it is suggested that on initialization, you will call API to get list of cities, then on selection of city, you will call API to get theaters in that city, On Theater selection, you will call API to get dates available for theater and based on date, you will get Time slots available.

The solution I have given is for small amount of data. If you have thousands of data, I suggest you to do thing mentioned above. Because, if you call API to take that much data in one call, obviously it will make impact on performance, it will take much time to respond.

Thanks & Regard.

Upvotes: 1

Mohaimin Moin
Mohaimin Moin

Reputation: 841

You can use ng-change as like when you select a city ng-change=selectTheaterByCity() called and in this function you can choose to get only theaterList and like same u can call another ng-change=selectDateByTheater() to get date list and so on.

Upvotes: 0

Related Questions