javascript - 如何根据另一个下拉列表中的选定值填充其他下拉列表中的值

Question

我有 4 个下拉框。

即城市、剧院、放映时间、放映日期。

目前我的代码正在填充 vlaues，例如，

根据选定的城市，它会填充剧院、放映日期和放映时间中的值。

我想做的是

基于选定的城市人口剧院

然后根据所选剧院填充放映时间和放映日期的值。

如何实现这一目标？

在 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 代码是

 $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;
              }
            }
          });	
 

Answer 1

首先，您需要根据您所在城市的剧院。日期必须与您的剧院一致，因为城市中的剧院不一定会在所有日期放映电影。时间将根据日期和剧院而定，因为每个剧院一天的演出数量可能不同。我为剧院数据创建了 $scope.theaterTime 。我在这里创建了演示:

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

如果您的剧院数据量很小，这将很好地工作。如果你的影院数据比较大，建议初始化时调用API获取城市列表，然后选择城市时调用API获取该城市的影院，选择影院时调用API获取剧院可用的日期，并根据日期，您将获得可用的时间段。

我给出的解决方案是针对少量数据的。如果您有数千个数据，我建议您执行上述操作。因为，如果你调用API一次调用那么多数据，显然会对性能产生影响，需要很多时间来响应。

感谢和问候。