Dynamic country states dropdown menu

Question

Hey I'm trying to create a form with a dropdown menu containing states are automatically filtered based on selected country. That is, only show the states of the selected country

JQuery

  $("#shipment_sender_attributes_state_code").parent().hide()
  $('#shipment_sender_attributes_country_code').change(function() {
    states = $("#shipment_sender_attributes_state_code").html()
    country = $('#shipment_sender_attributes_country_code :selected').val()
    options = $(states).filter("optgroup[label='" + country + "']").html()

    $states = $('#shipment_sender_attributes_state_code')
    if (options) {
      $states.html(options)
      $states.parent().show()
    } else {
      $states.empty()
      $states.parent().hide()
    }
  })

It works the first time I select a country, but if I select another, and then go back, the states variable remains empty and no drop down is shown. Any advice?

Form:

<optgroup label="us">
                    <option value="AA">Armed Forces Americas (AA)</option>
                    <option value="AE">Armed Forces Europe (AE)</option>
                    <option value="AK">Alaska (AK)</option>
                    <option value="AL">Alabama (AL)</option>
                    <option value="AP">Armed Forces Pacific (AP)</option>
                    <option value="AR">Arkansas (AR)</option>
                    ....

<optgroup label="ca"><option value="AB">Alberta (AB)</option>
                    <option value="BC">British Columbia (BC)</option>
                    <option value="MB">Manitoba (MB)</option>
                    <option value="NB">New Brunswick (NB)</option>
                    <option value="NL">Newfoundland and Labrador (NL)</option>
                    ....

EDIT JSfiddle

Can't quite get the fiddle working, but it's something like this

http://jsfiddle.net/d6cm5v6g/2/

Answer 1

Use var to declare your variables.

var states...
var country...
var options...

If you don't do that you are creating global variables

Answer 2

You need to do a minor change to your code:

$(function(){
  $("#shipment_sender_attributes_state_code").parent().hide()
  var states = $("#shipment_sender_attributes_state_code").html()

  $('#shipment_sender_attributes_country_code').change(function() {
    var country = $('#shipment_sender_attributes_country_code :selected').val()
    var options = $(states).filter("optgroup[label='" + country + "']").html()
    var $states = $('#shipment_sender_attributes_state_code')
    if (options) {
     $states.html(options)
     $states.parent().show()
    }
    else {
      $states.empty()
      $states.parent().hide()
    }
  })
});  

You need to move states outside the change function because in your else you do this $states.empty() , so the next time there is no html to filter(all options and optgroups are gone). This way you store the original value in an object.

I change the Afganistan value to "ca" in order for testing purposes(you can switch between Afganistan and United States)

Working fiddle: http://jsfiddle.net/robertrozas/4vxjpjLv/2/