Create Two Dynamic Dropdown Menus

February 28, 2024 Post a Comment

I´m currently trying to create a kind of form to choose options from two dependent drop-down menus. If you are changing the option on the upper one, the data on the lower one shou

Solution 1:

You can use the 'angular-filter' module to show unique options.

<selectname="country"ng-model="country"><optionng-repeat="option in Main.data | unique: 'country'"value="{{option.country}}">{{option.country}}</option></select><selectname="city"ng-model="city"><optionng-repeat="option in Main.data"ng-if="option.country == country"value="{{option.city}}">{{option.city}}</option></select>

Example

I added some Bootstrap classes to the form to clean up its presentation. :)

var app = angular.module('AngularApp', ['angular.filter']);

app.controller("MainCtrl", function() {
  var vm = this;

  vm.message = "Select Your Destination";
  vm.data = [
    { city: 'Berlin',         country: 'Germany' },
    { city: 'Hamburg',        country: 'Germany' },
    { city: 'Munich',         country: 'Germany' },
    { city: 'New York',       country: 'USA' },
    { city: 'Whashington DC', country: 'USA' },
    { city: 'Paris',          country: 'France' }
  ];
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.11/angular-filter.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet" /><bodyng-app="AngularApp"><divng-controller="MainCtrl as Main"class="container"><h1>{{Main.message}}</h1><form><divclass="form-group"><label>Country</label><selectname="country"ng-model="country"class="form-control"><optionng-repeat="option in Main.data | unique: 'country'"value="{{option.country}}">{{option.country}}</option></select></div><divclass="form-group"><label>City</label><selectname="city"ng-model="city"class="form-control"><optionng-repeat="option in Main.data"ng-if="option.country == country"value="{{option.city}}">{{option.city}}</option></select></div><br /><buttontype="submit"class="btn btn-default">Submit</button></form></div></body>

Solution 2:

HTML Code

<!DOCTYPE html><html><head><metacharset="UTF-8"><title>Login</title></head><bodyng-app="AngularApp"><divng-controller="MainCtrl as Main"><h1>{{Main.message}}</h1>
    country:
    <selectname="country"ng-model="cont"ng-init="cont = cont || 'Germany'"><optionng-selected="$first"ng-repeat="con in Main.data | unique:'country'">{{con.country}}</option></select><br/>
    city:
    <selectname="city"ng-model="cit"><optionng-selected="$first"ng-repeat="ct in Main.data | filter:{country: cont}">{{ct.city}}</option></select></div><scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"type="text/javascript"></script><scriptsrc="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"type="text/javascript"></script><scriptsrc="app.js"></script></body></html>

Create one filter named 'unique' in your app.js . So your app.js like this..

var app = angular.module('AngularApp', []);
app.controller("MainCtrl", function() {
    var vm = this;

    vm.message = 'select your destination';

    vm.data = [{city: 'Berlin', country: 'Germany'},
               {city: 'Hamburg', country: 'Germany'},
               {city: 'Munich', country: 'Germany'},
               {city: 'New York', country: 'USA'},
               {city: 'Whashington DC', country: 'USA'},
               {city: 'Paris', country: 'France'}
            ];
});
app.filter('unique', function() {
  returnfunction (arr, field) {
    var o = {}, i, l = arr.length, r = [];
    for(i=0; i<l;i+=1) {
      o[arr[i][field]] = arr[i];
    }
    for(i in o) {
      r.push(o[i]);
    }
    return r;
  };
});

Solution 3:

var app = angular.module('AngularApp', ['angular.filter']);

app.controller("MainCtrl", function() {
  var vm = this;

  vm.message = "Select Your Destination";
  vm.data = [
    { city: 'Berlin',         country: 'Germany' },
    { city: 'Hamburg',        country: 'Germany' },
    { city: 'Munich',         country: 'Germany' },
    { city: 'New York',       country: 'USA' },
    { city: 'Whashington DC', country: 'USA' },
    { city: 'Paris',          country: 'France' }
  ];
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.11/angular-filter.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet" /><bodyng-app="AngularApp"><divng-controller="MainCtrl as Main"class="container"><h1>{{Main.message}}</h1><form><divclass="form-group"><label>Country</label><selectname="country"ng-model="country"class="form-control"><optionvalue=""selected="selected">Choose one</option><optionng-repeat="option in Main.data | unique: 'country'"value="{{option.country}}">{{option.country}}</option></select></div><divclass="form-group"><label>City</label><selectname="city"ng-model="city"class="form-control"><optionvalue=""selected="selected">Choose one</option><optionng-repeat="option in Main.data"ng-if="option.country == country"value="{{option.city}}">{{option.city}}</option></select></div><br /><buttontype="submit"class="btn btn-default">Submit</button></form></div></body>

Solution 4:

You can use below HTML:

Country:
<selectname="country"ng-model="country"><optionng-repeat="option in Main.data"value="{{option.country}}">{{option.country}}</option></select>City:
<selectname="city"ng-model="city"><optionng-repeat="option in Main.data"ng-if="option.country == country"value="{{option.city}}">{{option.city}}</option></select>

Html5 Developer