Updating information within AngularJS select boxes

Question

Updating information within AngularJS select boxes

On my page, I have 3 select boxes. When a user selects an option in the first select box, I want the options in the second select box to update based on the value selected in the first one.

Similarly, I want the options in the third select box to change when an option is selected in the second select box. Any ideas on how to accomplish this efficiently using AngularJS?

javascript angularjs angularjs-forms

Answer 1

Answer №1

To implement this functionality, you can utilize ng-options in combination with Angular filters

Controller

angular.module('app', [])
  .controller('Ctrl', function($scope) {
    $scope.countries = {
      'India': {
        'Andhra Pradesh': ['Vijayawada', 'Guntur', 'Nellore', 'Kadapa'],
        'Madhya Pradesh': ['Hyderabad', 'Warangal', 'Karimnagar'],
      },
      'USA': {
        'San Francisco': ['SOMA', 'Richmond', 'Sunset'],
        'Los Angeles': ['Burbank', 'Hollywood']
      },
      'Australia': {
        'New South Wales': ['Sydney', 'Orange', 'Broken Hill'],
        'Victoria': ['Benalla', 'Melbourne']
      }
    };
  })

Markup

 <div ng-controller="Ctrl">
    <div class="container">>
      <div class="form-group">
        <label class="control-label" for="Country">Country:</label>
        <select class="form-control input-lg" id="country" ng-model="states" ng-options="country for (country, states) in countries">
          <option value=''>Select</option>
        </select>
      </div>
      <div class="form-group">
        <label class="control-label" for="States">States:</label>
        <select class="form-control input-lg" id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states">
          <option value=''>Select</option>
        </select>
      </div>
      <div class="form-group">
        <label class="control-label" for="City">City:</label>
        <select class="form-control input-lg" id="city" ng-disabled="!cities || !states" ng-model="city" ng-options="city for city in cities">
          <option value=''>Select</option>
        </select>
      </div>
    </div>
  </div>

Live Example

Answer 2

To implement this functionality, you can utilize ng-options in combination with Angular filters

Controller

angular.module('app', [])
  .controller('Ctrl', function($scope) {
    $scope.countries = {
      'India': {
        'Andhra Pradesh': ['Vijayawada', 'Guntur', 'Nellore', 'Kadapa'],
        'Madhya Pradesh': ['Hyderabad', 'Warangal', 'Karimnagar'],
      },
      'USA': {
        'San Francisco': ['SOMA', 'Richmond', 'Sunset'],
        'Los Angeles': ['Burbank', 'Hollywood']
      },
      'Australia': {
        'New South Wales': ['Sydney', 'Orange', 'Broken Hill'],
        'Victoria': ['Benalla', 'Melbourne']
      }
    };
  })

Markup

 <div ng-controller="Ctrl">
    <div class="container">>
      <div class="form-group">
        <label class="control-label" for="Country">Country:</label>
        <select class="form-control input-lg" id="country" ng-model="states" ng-options="country for (country, states) in countries">
          <option value=''>Select</option>
        </select>
      </div>
      <div class="form-group">
        <label class="control-label" for="States">States:</label>
        <select class="form-control input-lg" id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states">
          <option value=''>Select</option>
        </select>
      </div>
      <div class="form-group">
        <label class="control-label" for="City">City:</label>
        <select class="form-control input-lg" id="city" ng-disabled="!cities || !states" ng-model="city" ng-options="city for city in cities">
          <option value=''>Select</option>
        </select>
      </div>
    </div>
  </div>

Live Example

Answer 3

Answer №2

To implement the desired functionality, simply utilize the ng-change directive in AngularJS. This directive allows you to invoke a function from your controller to execute any necessary logic.

<select "ng-change"="item_change(selectedItem)" "ng-model"="selectedItem" "ng-options"="item.id as item.name for item in items">

Answer 4

To implement the desired functionality, simply utilize the ng-change directive in AngularJS. This directive allows you to invoke a function from your controller to execute any necessary logic.

<select "ng-change"="item_change(selectedItem)" "ng-model"="selectedItem" "ng-options"="item.id as item.name for item in items">

Answer 5

Answer №3

Here is the code snippet in HTML and JavaScript:

<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script src="sct.js"></script>
</head>

<body >
<div ng-controller="MyCtrl">
<select ng-model='selectedNumber' ng-change="adv(selectedNumber);" ng-options='number for number in numbers'></select>
 num:   {{selectedNumber}}
<select ng-model='selected' ng-options="number for number in numbers">   </select>
num:   {{selected}}
<button ng-click="add()" >add</button>
</div>
</body>
</html>

JS:

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {    
$scope.numbers = [1,2,3,4,5,6,7,8,9,10];
$scope.num = angular.copy($scope.numbers);
$scope.selectedNumber = $scope.numbers[0];
//$scope.selected = $scope.num[0];

$scope.add=function(){
$scope.num = angular.copy($scope.numbers);
}

$scope.adv = function(selectedNumber){
$scope.num = angular.copy($scope.numbers);
$scope.selected = $scope.numbers[selectedNumber -1]; 
//var a = $scope.num.splice(selectedNumber-1, 1);  
}

$scope.num = angular.copy($scope.numbers);
});

I hope this code snippet is useful for you.

Answer 6

Here is the code snippet in HTML and JavaScript:

<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script src="sct.js"></script>
</head>

<body >
<div ng-controller="MyCtrl">
<select ng-model='selectedNumber' ng-change="adv(selectedNumber);" ng-options='number for number in numbers'></select>
 num:   {{selectedNumber}}
<select ng-model='selected' ng-options="number for number in numbers">   </select>
num:   {{selected}}
<button ng-click="add()" >add</button>
</div>
</body>
</html>

JS:

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {    
$scope.numbers = [1,2,3,4,5,6,7,8,9,10];
$scope.num = angular.copy($scope.numbers);
$scope.selectedNumber = $scope.numbers[0];
//$scope.selected = $scope.num[0];

$scope.add=function(){
$scope.num = angular.copy($scope.numbers);
}

$scope.adv = function(selectedNumber){
$scope.num = angular.copy($scope.numbers);
$scope.selected = $scope.numbers[selectedNumber -1]; 
//var a = $scope.num.splice(selectedNumber-1, 1);  
}

$scope.num = angular.copy($scope.numbers);
});

I hope this code snippet is useful for you.

Answer 7

Answer №4

Here is the code snippet for countries, states, and cities. This is exactly what you are looking for.

To implement this, create two files: state.php and city.php to output the data in JSON format.

<script type="text/javascript" src="angular.min.js">
    var app = angular.module("placesApp",[]); // Initialize Angular JS App
        app.controller("placesController",["$scope","$http",function($scope,$http){
    $http.get("country.php").success(function(response) // Get Countries from country.php
      {
    $scope.countries = response; // Store the data/response in a variable
      });

    $scope.getStates = function()
            {
                $http.post('state.php',{countryId:$scope.places.country}).success(function(data)
                {
                    $scope.states = data;
                });
            }
    $scope.onStateChange = function()
        {
            $http.post("city.php",{stateId:$scope.places.state}).success(function(data)
            {
                if(data!="")
                {                   
                    $scope.cities = data;
                }
            });
        }

        $scope.submitForm = function()
        {
            $scope.submitted = true;
        }
    }]);
</script>
    <body ng-app="placesApp">
<div ng-controller="placesController">
<form name="placesForm" id="placesForm" method="post" action="">
Countries:<select name="country" id="country" ng-model="places.country" ng-required="true" ng-change="onCountryChange()" ng-options="cou.CountryId as cou.CountryName for cou in countries">
                        <option value="">Select Country</option>
                    </select>
States: <select name="state" id="state" ng-model="places.state" ng-required="true" ng-change="onStateChange()" ng-options="sta.StateId as sta.StateName for sta in states">
                        <option value="" style="display:none;">Select State</option>
                    </select>
Cities:<select name="city" id="city" ng-model="places.city" ng-required="true" ng-options="cit.CityId as cit.CityName for cit in cities">
                        <option value="" style="display:none;">Select City</option>
                    </select>
<input type="submit" name="submit" id="register" value="Submit" ng-click="submitForm()">
</form>
</div>
</body>
</html>

Answer 8

Here is the code snippet for countries, states, and cities. This is exactly what you are looking for.

To implement this, create two files: state.php and city.php to output the data in JSON format.

<script type="text/javascript" src="angular.min.js">
    var app = angular.module("placesApp",[]); // Initialize Angular JS App
        app.controller("placesController",["$scope","$http",function($scope,$http){
    $http.get("country.php").success(function(response) // Get Countries from country.php
      {
    $scope.countries = response; // Store the data/response in a variable
      });

    $scope.getStates = function()
            {
                $http.post('state.php',{countryId:$scope.places.country}).success(function(data)
                {
                    $scope.states = data;
                });
            }
    $scope.onStateChange = function()
        {
            $http.post("city.php",{stateId:$scope.places.state}).success(function(data)
            {
                if(data!="")
                {                   
                    $scope.cities = data;
                }
            });
        }

        $scope.submitForm = function()
        {
            $scope.submitted = true;
        }
    }]);
</script>
    <body ng-app="placesApp">
<div ng-controller="placesController">
<form name="placesForm" id="placesForm" method="post" action="">
Countries:<select name="country" id="country" ng-model="places.country" ng-required="true" ng-change="onCountryChange()" ng-options="cou.CountryId as cou.CountryName for cou in countries">
                        <option value="">Select Country</option>
                    </select>
States: <select name="state" id="state" ng-model="places.state" ng-required="true" ng-change="onStateChange()" ng-options="sta.StateId as sta.StateName for sta in states">
                        <option value="" style="display:none;">Select State</option>
                    </select>
Cities:<select name="city" id="city" ng-model="places.city" ng-required="true" ng-options="cit.CityId as cit.CityName for cit in cities">
                        <option value="" style="display:none;">Select City</option>
                    </select>
<input type="submit" name="submit" id="register" value="Submit" ng-click="submitForm()">
</form>
</div>
</body>
</html>

Updating information within AngularJS select boxes

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How can parameters be sent without using the .jshintrc file with the gulp-jshint package?

Troubleshooting Appium error management is ineffective

What is the best way to incorporate custom KnockoutJS functions using RequireJS?

Steps for retrieving the currently selected text inside a scrolled DIV

What is the best way to incorporate the :after pseudo-element in JavaScript code

Ensure that PHP errors are reported in JSON format, following the standard content-type guidelines

Showing AngularJS information on Views

Displaying a message text upon successful AJAX request

What is the best way to incorporate visual indicators into specific columns containing certain keywords?

"Encountering an error with ExpressJS where it cannot GET a file, preventing access to other folders' content

A guide on successfully handling errors while utilizing S3.getsignedurlpromise() in node.js

From Python Plotly to JavaScript Plotly - Leveraging the Power of

The Zip file generated in memory is experiencing corruption

My Discord.js bot was running smoothly until I added a new command, and suddenly everything went haywire. Can someone assist me in figuring out what went

Advantages of optimizing NodeJS/TypeScript application by bundling it with webpack

Experiencing a RepositoryNotFoundError in TypeORM, although I am confident that the repositories are properly registered

What is the best way to integrate JQuery URL in Joomla components?

Filtering out specific properties from an element within a JavaScript forEach loop

Setting the borderRadius for a web view on Android Maps V3: A complete guide

What is the method for retrieving an image source using JavaScript?