HTML widget change for dropdown

[Hafsa1]

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?

[M Iftikhar · Accepted solution]

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.

[M Iftikhar · Accepted solution]

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.

[Hafsa1]

@M Iftikhar 

@Ankur Bawiskar 

Can I have display value in array:-

"England" will be display Value and "GBENG" will be backend value? and all coding will be based on "GBENG"

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"
        ]
    };

[M Iftikhar · Accepted solution]

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.

[Ankur Bawiskar]

@Hafsa1 

what did you start with and where are you stuck?

If my response helped please mark it correct and close the thread so that it benefits future readers.