Populate Div by Drop Down

Question

I am trying to create a Dynamic page that changes depending on a Drop Down selection. So for the setup, I have two Drop Downs. The easiest way to describe it would be a Country and State drop down. I'd like it so that when a particular state is selected, a separate div is populated with information on that state. Now that is just an example, but it is pretty much what I'm looking for. I've already setup two drop downs using some simple Javascript and arrays to populate them like so.

<script type="text/javascript">
var postState = '';
var postCountry = '';

var state = '\
US:AK:Alaska|\
US:AL:Alabama|\
US:AR:Arkansas|\
';

var country = '\
US:United States|\
';

function populateCountry(defaultCountry) {
  if ( postCountry != '' ) {
    defaultCountry = postCountry;
  }
  var countryLineArray = country.split('|');  // Split into lines
  var selObj = document.getElementById('countrySelect');
  selObj.options[0] = new Option('Select Country','');
  selObj.selectedIndex = 0;
  for (var loop = 0; loop < countryLineArray.length; loop++) {
    lineArray = countryLineArray[loop].split(':');
    countryCode  = TrimString(lineArray[0]);
    countryName  = TrimString(lineArray[1]);
    if ( countryCode != '' ) {
      selObj.options[loop + 1] = new Option(countryName, countryCode);
    }
    if ( defaultCountry == countryCode ) {
      selObj.selectedIndex = loop + 1;
    }
  }
}

function populateState() {
  var selObj = document.getElementById('stateSelect');
  var foundState = false;
  // Empty options just in case new drop down is shorter
  if ( selObj.type == 'select-one' ) {
    for (var i = 0; i < selObj.options.length; i++) {
      selObj.options[i] = null;
    }
    selObj.options[0] = new Option('Select State','');
    selObj.selectedIndex = 0;
  }
  // Populate the drop down with states from the selected country
  var stateLineArray = state.split("|");  // Split into lines
  var optionCntr = 1;
  for (var loop = 0; loop < stateLineArray.length; loop++) {

    lineArray = stateLineArray[loop].split(":");
    countryCode  = TrimString(lineArray[0]);
    stateCode    = TrimString(lineArray[1]);
    stateName    = TrimString(lineArray[2]);
  if (document.getElementById('countrySelect').value == countryCode && countryCode != '' ) {
    // If it's a input element, change it to a select
      if ( selObj.type == 'text' ) {
        parentObj = document.getElementById('stateSelect').parentNode;
        parentObj.removeChild(selObj);
        var inputSel = document.createElement("SELECT");
        inputSel.setAttribute("name","state");
        inputSel.setAttribute("id","stateSelect");
        parentObj.appendChild(inputSel) ;
        selObj = document.getElementById('stateSelect');
        selObj.options[0] = new Option('Select State','');
        selObj.selectedIndex = 0;
      }
      if ( stateCode != '' ) {
        selObj.options[optionCntr] = new Option(stateName, stateCode);
      }
      // See if it's selected from a previous post
      if ( stateCode == postState && countryCode == postCountry ) {
        selObj.selectedIndex = optionCntr;
      }
      foundState = true;
      optionCntr++
    }
  }
function initCountry(country) {
  populateCountry(country);
  populateState();
}
</script>

I am not great with Javascript so that is pretty much as far as I've got. If there are easier ways of populating the drop downs, I am all for it. I'm pretty experienced in PHP so I was hoping of some sort of cross-over for displaying the content.

To reiterate, I have two drop downs. Select options in 1, and different options become available in 2. You click an option in 2, and information is displayed in a DIV below. Users should be able to continue selecting options and displaying information.

Answer 1

You need to consider doing this with AJAX. The data set is too large, really, to store all of it locally. Gonna write my response using jQuery and I'm gonna oversimplify a bit for the sake of teaching. First off, we need a function for when our state changes (note that you could write one rollup function to do it all but I don't think you're on that level quite yet)

function changeDrop1() {
    var country = $('#mydrop1').val();
    $.getJSON('/your/ajax/file/?country=' + country, function(data) {
         $('#mydrop2').empty();
         $.each( data, function( key, val ) {
            var opt = $('<option/>', {'value':key }).text(val);
            $('#mydrop2').append(opt);
         });
    });
}

My assumption is that your AJAX will poll for the country passed return a JSON object like this

{ "AL":"Alabama", "AK":"Alaska" }

When your script passes the country, you return states in this format and you can use each to iterate over them and populate dropdown 2. The last piece here is how to trigger it. In your page, you would add

$(document).ready(function() {
     $('#mydrop1').change( changeDrop1(); });
});

Now, when your dropdown value changes, you trigger the AJAX to populate dropdown 2. I hope this all makes sense. You can reuse the same techniques for checking dropdown 2 and populating your div.