How to create dependent drop-down lists in html page using JavaScript and AngularJs with JSON data.

Question

HTML code, that may not be correct:

<div ng-app="myApp" ng=controller="myCtrl">
States : <select id="source" name="source">
     <option>{{state.name}}</option>
      </select>

Districts: <select id="status" name="status">
    <option>{{district.name}}</option>
    </select>

Let say JSON content is as below:

State name: s1, s2, s3, s4...and so on. District name in state s1 are: d1a,d1b,d1c,d1d...and so on

District name in state s2 are: d2a,d2b,d2c,d2d...and so on

District name in state s are: d3a,d3b,d3c,d3d...and so on ...like this.

I want that when user click on the states drop-down then the other drop-down should show the corresponding districts name.

You've a typo in the first line. It should be `ng-controller`. — Nisarg Shah, Jul 15 '17 at 05:54
Sounds like you wish to perform some kind of filtering on Districts. Try reading more here: https://docs.angularjs.org/api/ng/filter/filter — Mads Nielsen, Jul 15 '17 at 05:59

score 0 · Answer 1 · answered Jul 15 '17 at 06:23

You can do something like this,

<body ng-controller="SelectorCtrl">
  <h1>Hello Plunker!</h1>
  <select class="form-control" id="state" ng-model="divisionsSource" ng-options="stateName as stateName.State for stateName in data ">
    <option value=''>Select</option>
  </select>
  <select class="form-control" id="district" ng-model="workplacesSource" ng-disabled="!divisionsSource" ng-options="division as division.districtName for division in divisionsSource.Districts ">
    <option value=''>Select</option>
  </select>
</body>

DEMO

angular.module('app', []).controller('SelectorCtrl', function($scope) {
  $scope.data = [{
    "State": "S1",
    "Districts": [{
      "districtName": "D1"
    }, {
      "districtName": "D2"
    }, {
      "districtName": "D3"
    }]
  }, {
    "State": "S2"
  }];
});

<!DOCTYPE html>
<html ng-app="app">
<head>
  <script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>
<body ng-controller="SelectorCtrl">
  <h1>Hello!</h1>
  <select class="form-control" id="state" ng-model="divisionsSource" ng-options="stateName as stateName.State for stateName in data ">
    <option value=''>Select</option>
  </select>
  <select class="form-control" id="district" ng-model="workplacesSource" ng-disabled="!divisionsSource" ng-options="division as division.districtName for division in divisionsSource.Districts ">
    <option value=''>Select</option>
  </select>
</body>
</html>

Thanks a lot bother!! Sajeetharan. you made my work very simple now. — Abhishek Kumar, Jul 16 '17 at 06:13

score 0 · Answer 2 · answered Jul 15 '17 at 06:24

Try this code below.

index.html

<div data-ng-app="myApp" data-ng-controller="StateController as stateCtrl">

    States :
    <select id="source" name="source" data-ng-model="dataState" data-ng-options="state.id as state.name for state in states" data-ng-change="stateCtrl.changeState(dataState)">
        <option value="">Select State</option>>
    </select>

    Districts:
    <select id="status" name="status" data-ng-options="district.id as district.name for district in districts">
        <option>{{district.name}}</option>
    </select>
</div>

app.js

var state = angular.module("myApp", []);

state.controller('StateController', ['$window', '$scope', function($window, $scope) {
    $scope.states = [{id: 1, name: 's1'}, {id: 1, name: 's2'}, {id: 1, name: 's3'}]; $scope.districts = {};

    this.changeState = function(id) {
        //Add whatever condition u need. Below code is a hard coded way. I recommend using ajax request to fetch district results based on states
        if (id === 1) {
            $scope.districts = [{id: 1, name: 'd1'}, {id: 1, name: 'd2'}, {id: 1, name: 'd3'}]; 
        } else if (id === 2) {
            $scope.districts = [{id: 1, name: 'd4'}, {id: 1, name: 'd5'}, {id: 1, name: 'd6'}];
        }
    }
}]);

Thank you so much Brother!! @Iaktherock, this is what i actually wanted. (y) — Abhishek Kumar, Jul 16 '17 at 06:06

score 0 · Answer 3 · answered Jul 15 '17 at 06:25

What's left is how to remove the duplicate states. You could keep the in a separate array, where duplicates are removed, or use a unique filter as described here

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-filter-filter-production</title>
  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="">
  <div ng-init="districts = [{state:'State 1', district:'District 1'},
                             {state:'State 1', district:'District 2'},
                             {state:'State 1', district:'District 3'},
                             {state:'State 2', district:'District 4'},
                             {state:'State 2', district:'District 5'},
                             {state:'State 3', district:'District 6'}]"></div>

<select ng-model="search.state">
  <option></option>
  <option ng-repeat="district in districts">{{district.state}}</option>
</select>
<select>
  <option ng-repeat="district in districts | filter:search:strict">{{district.district}}</option>
</select>
</body>
</html>

How to create dependent drop-down lists in html page using JavaScript and AngularJs with JSON data.

3 Answers3