I need two fields dependency on widget, like country and state
Country: United kingdom, Europe and United States.
States:
United kingdom: 1 state
Europe: 4 states
United States: 19 states
when "country" is selected as US then "state" must show 19 options
when "country" is selected as europe then "state" must show 4 options
what will be the html and server script and all?
Hi @Hafsa1 ,
You can use the following code snippets for your requirements:
HTML:
<div class="form-group">
<label for="country">Country</label>
<select id="country" class="form-control"
ng-model="selectedCountry"
ng-options="country for country in data.countries"
ng-change="onCountryChange()">
<option value="">-- Select Country --</option>
</select>
</div>
<div class="form-group" ng-if="states.length > 0">
<label for="state">State</label>
<select id="state" class="form-control"
ng-model="selectedState"
ng-options="state for state in states">
<option value="">-- Select State --</option>
</select>
</div>
<div class="mt-3" ng-if="selectedCountry && selectedState">
<strong>Selected:</strong> {{selectedCountry}} → {{selectedState}}
</div>Client-Script:
function($scope) {
// Initialize
$scope.selectedCountry = "";
$scope.selectedState = "";
$scope.states = [];
// When country changes
$scope.onCountryChange = function() {
if ($scope.selectedCountry) {
// Get the related states from server data
$scope.states = $scope.data.countryStateMap[$scope.selectedCountry] || [];
$scope.selectedState = ""; // Reset selection
} else {
$scope.states = [];
}
};
}Server-script:
(function() {
// Define country and states mapping
data.countryStateMap = {
"United Kingdom": ["England"],
"Europe": ["Germany", "France", "Spain", "Italy"],
"United States": [
"Alabama", "Alaska", "Arizona", "California", "Colorado", "Florida",
"Georgia", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky",
"Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan",
"Minnesota", "Mississippi"
]
};
// Send only the list of countries to the client
data.countries = Object.keys(data.countryStateMap);
})();The results:
When select Europe in country:
When select United States in country:
Thanks & Regards,
Muhammad Iftikhar
If my response helped, please mark it as the accepted solution so others can benefit as well.
Hi @Hafsa1 ,
Yes, you can have the display value in the data, you just need to use an object instead of an array for that. Here's the sample code snippet you can use:
Html:
<div class="p-3">
<h4>Select Country and State</h4>
<!-- Country dropdown -->
<div class="form-group">
<label>Country</label>
<select ng-model="c.selected.country"
ng-change="c.updateStates()"
ng-options="country for country in c.data.countries"
class="form-control">
<option value="">-- Select Country --</option>
</select>
</div>
<!-- State dropdown -->
<div class="form-group" ng-if="c.selected.country">
<label>State</label>
<select ng-model="c.selected.state"
ng-options="s.value as s.label for s in c.availableStates"
class="form-control">
<option value="">-- Select State --</option>
</select>
</div>
<!-- Button - just to show the backend value -->
<button class="btn btn-primary mt-2" ng-click="c.showSelection()">
Show Selection
</button>
<!-- Show JSON - Backend Value -->
<pre ng-if="c.selectionJSON" class="mt-3 bg-light p-2 rounded">
{{ c.selectionJSON }}
</pre>
</div>
Client-script:
api.controller=function($scope) {
var c = this;
// Initialize selections
c.selected = {
country: "",
state: ""
};
// When country changes, update the available states
c.updateStates = function() {
c.availableStates = c.data.countryStateMap[c.selected.country] || [];
c.selected.state = "";
c.selectionJSON = ""; // Clear previous selection
};
// to check the backend value
// When user clicks "Show Selection"
c.showSelection = function() {
payload = {
country: c.selected.country,
state: c.selected.state
};
// Show JSON in browser console
console.log(">>> Selected JSON:", JSON.stringify(payload, null, 2));
// Show JSON on screen
c.selectionJSON = JSON.stringify(payload, null, 2);
};
}
Server-script:
(function() {
// Define country: state mapping with label/value pairs
data.countryStateMap = {
"United Kingdom": [
{ label: "England", value: "GBENG" }
],
"Europe": [
{ label: "Germany", value: "DEU" },
{ label: "France", value: "FRA" },
{ label: "Spain", value: "ESP" },
{ label: "Italy", value: "ITA" }
],
"United States": [
{ label: "Alabama", value: "USAL" },
{ label: "Alaska", value: "USAK" },
{ label: "Arizona", value: "USAZ" },
{ label: "California", value: "USCA" },
{ label: "Colorado", value: "USCO" },
{ label: "Florida", value: "USFL" },
{ label: "Georgia", value: "USGA" },
{ label: "Illinois", value: "USIL" },
{ label: "Indiana", value: "USIN" },
{ label: "Iowa", value: "USIA" },
{ label: "Kansas", value: "USKS" },
{ label: "Kentucky", value: "USKY" },
{ label: "Louisiana", value: "USLA" },
{ label: "Maine", value: "USME" },
{ label: "Maryland", value: "USMD" },
{ label: "Massachusetts", value: "USMA" },
{ label: "Michigan", value: "USMI" },
{ label: "Minnesota", value: "USMN" },
{ label: "Mississippi", value: "USMS" }
]
};
// Country list
data.countries = Object.keys(data.countryStateMap);
})();
The Output:
When selecting United Kingdom in Country and England in State, Show Selection button will show the backend value of the state (just to show you the backend value and you can use it however you want at the backend):
When selecting Europe in Country and France in state:
When selecting United States in Country and California in State:
Now, you can use the label for UI as display value and value for the backend.
If my response helped, please mark it as the accepted solution so others can benefit as well.
