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]

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.

[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.

[palanikumar]

Hello @Hafsa1 ,

Are you creating a custom page with your own custom widget or is it part of the form (eg incident form)

If you are creating a custom page or widget then you can either update the options from the client controller or call the ServerSide Script from client controler

If you want to achieve this in a form, then you can use dependent field. You need to set Country as dependent field for State