Dynamic country, state select options Here is code I wrote to dynamically choose between three country options (United States, Canada, Other). After the user selects a country it will show the related select option or an empty input (when &quot;Other&quot; country is chosen). Then I pass the previous value into an input called spr(state/province/region). The end result is two values are saved: country and spr.
I'm here because I think the code could be refactored, and I'm not thinking about it in an efficient way.


const country = '#country';
const province = '#province';
const region = '#region';
const state = '#state';
const spr = '#spr';
const usa = '#usa';
const canada = '#canada';
const otherCountry = '#otherCountry';

hideCountryOptions(); //initial hide

$(country).on('change', function() {
  hideCountryOptions();
  selectSPR($(country).val());
  switch ($(country).val()) {
    case "UNITED STATES":
      $(usa).show();
      break;
    case "CANADA":
      $(canada).show();
      break;
    default:
      $(otherCountry).show();
  }
})

$(state + "," + province + "," + region).on('change', function() {
  selectSPR($(country).val());
});

function hideCountryOptions() {
  $(canada).hide();
  $(usa).hide();
  $(otherCountry).hide();
}

function selectSPR(country) { //pass value into the state/province/region input
  $(spr).val("");
  switch (country) {
    case "UNITED STATES":
      $(spr).val($(state).val());
      break;
    case "CANADA":
      $(spr).val($(province).val());
      break;
    default:
      $(spr).val($(region).val());
  }
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div&gt;
  &lt;label for="country"&gt;*Country&lt;/label&gt;
  &lt;select name="country" id="country" required&gt;
      &lt;option value=""&gt;CHOOSE…&lt;/option&gt;
      &lt;option value="UNITED STATES"&gt;UNITED STATES&lt;/option&gt;
      &lt;option value="CANADA"&gt;CANADA&lt;/option&gt;
      &lt;option value="AFGHANISTAN"&gt;AFGHANISTAN&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;
&lt;div id="usa"&gt;
  &lt;label for="state"&gt;*State&lt;/label&gt;
  &lt;select name="state" id="state"&gt;
      &lt;option value=""&gt;CHOOSE...&lt;/option&gt;
      &lt;option value="ALABAMA"&gt;ALABAMA&lt;/option&gt;
      &lt;option value="ALASKA"&gt;ALASKA&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;
&lt;div id="canada"&gt;
  &lt;label for="province"&gt;*Province&lt;/label&gt;
  &lt;select class="custom-select" name="province" id="province"&gt;
      &lt;option value=""&gt;CHOOSE...&lt;/option&gt;
      &lt;option value="ALBERTA"&gt;ALBERTA&lt;/option&gt;
      &lt;option value="BRITISH COLUMBIA"&gt;BRITISH COLUMBIA&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;
&lt;div id="otherCountry"&gt;
  &lt;label for="region"&gt;*Region&lt;/label&gt;
  &lt;input type="text" name="region" id="region" placeholder="Region"&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;input type="text" name="spr" id="spr"&gt;
&lt;/div&gt;
I reduced the script in this way:


The script length (in lines): was 49, now 27
The jQuery lookups: was 18, now 7
The sub-function amount: was 2, now 0


There is still 2 change handlers.

The main changes:

I used classes... You were using any, except for custom-select that was not used here, in fact.
And I used CSS for the onload hiding of countries sub-division selects.

The lookups are made onload, in the const declarations, for all needed elements. Why only store the selector's string when the jQuery object can be stored?

You had the named function hideCountryOptions() to call 3 times the .hide() method on "similar" elements... I gave them the same countryPossible class to hide them in one shot.

The selectSPR(country) named function was replaced by spr.val(this.value); on change of countrySubDiv, which is the lookup made to target all the country sub-division's user inputs. No need for a switch()! Clearly, only the select that is visible can change, so this.value is the one to put into #spr.



const country = $("#country");
const countryPossibilities = $(".countryPossible");
const countrySubDiv = $(".countryPossible select, .countryPossible input");
const usa = $("#usa");
const canada = $("#canada");
const otherCountry = $("#otherCountry");
const spr = $("#spr");

country.on("change", function() {
  countryPossibilities.hide();
  switch (this.value) {
    case "UNITED STATES":
      usa.show();
      break;
    case "CANADA":
      canada.show();
      break;
    default:
      otherCountry.show();
  }
  countrySubDiv.val("");
  spr.val("");
});

countrySubDiv.on("change",function(){
  spr.val(this.value);
});
.countryPossible{
  display: none;
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;div&gt;
  &lt;label for="country"&gt;*Country&lt;/label&gt;
  &lt;select name="country" id="country" required&gt;
    &lt;option value=""&gt;CHOOSE…&lt;/option&gt;
    &lt;option value="UNITED STATES"&gt;UNITED STATES&lt;/option&gt;
    &lt;option value="CANADA"&gt;CANADA&lt;/option&gt;
    &lt;option value="AFGHANISTAN"&gt;AFGHANISTAN&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;
&lt;div id="usa" class="countryPossible"&gt;
  &lt;label for="state"&gt;*State&lt;/label&gt;
  &lt;select name="state"&gt;
    &lt;option value=""&gt;CHOOSE...&lt;/option&gt;
    &lt;option value="ALABAMA"&gt;ALABAMA&lt;/option&gt;
    &lt;option value="ALASKA"&gt;ALASKA&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;
&lt;div id="canada" class="countryPossible"&gt;
  &lt;label for="province"&gt;*Province&lt;/label&gt;
  &lt;select name="province"&gt;
    &lt;option value=""&gt;CHOOSE...&lt;/option&gt;
    &lt;option value="ALBERTA"&gt;ALBERTA&lt;/option&gt;
    &lt;option value="BRITISH COLUMBIA"&gt;BRITISH COLUMBIA&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;
&lt;div id="otherCountry" class="countryPossible"&gt;
  &lt;label for="region"&gt;*Region&lt;/label&gt;
  &lt;input type="text" name="region" placeholder="Region"&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;input type="text" name="spr" id="spr"&gt;
&lt;/div&gt;