<!-- HTML code -->

<select id="country-select" onchange="updateStateOptionsPk()">
   <option value="">Select a country</option>
   <option value="india">INDIA</option>
   <option value="canada">Canada</option>
</select>

<select id="state-select">
   <option value="">Select a state/province</option>
</select>

<!-- JavaScript code -->

<script>
   function updateStateOptionsPk() {
       var countrySelectPk = document.getElementById("country-select");
       var stateSelectPk = document.getElementById("state-select");
       var selectedCountryPk = countrySelectPk.value;

       // Clear the state options
       stateSelectPk.innerHTML = "<option value=''>Select a state/province</option>";

       // Dynamically create and populate the state options based on the selected country
       if (selectedCountryPk === "india") {
           var indianStatesPk = ["delhi", "mumbai", "up", "bihar", "Mp"];

           for (var i = 0; i < indianStatesPk.length; i++) {
               var optionPk = document.createElement("option");
               optionPk.text = indianStatesPk[i];
               optionPk.value = indianStatesPk[i];
               stateSelectPk.add(optionPk);
           }
       } else if (selectedCountryPk === "canada") {
           var canadianProvincesPk = ["Alberta", "British Columbia", "Manitoba", "New Brunswick", "Newfoundland and Labrador", "Northwest Territories", "Nova Scotia", "Nunavut", "Ontario", "Prince Edward Island", "Quebec", "Saskatchewan", "Yukon"];

           for (var i = 0; i < canadianProvincesPk.length; i++) {
               var optionPk = document.createElement("option");
               optionPk.text = canadianProvincesPk[i];
               optionPk.value = canadianProvincesPk[i];
               stateSelectPk.add(optionPk);
           }
       }
   }
</script>