how to populate the second drop down using the selected value in first drop down?

Question

Say I have two drop downs which are populated when the my jsp loads

 <select id="Group" name="group"> -- first drop down
    <option value="0001">1</option>
    <option value="0002">2</option>
 </select>

 <select id="subGroup" name="class"> -- second drop down
    <option value="0001-000">A</option> -- sub group associated with option value 001
    <option value="0001-010">B</option>
    <option value="0001-020">C</option>
    <option value="0001-030">D</option>
    <option value="0001-040">E/option>
    <option value="0002-000">F</option> -- sub group associated with option value 002
    <option value="0002-010">G</option>
    <option value="0002-020">H</option>
    <option value="0002-040">I</option>
  </select>

Now I need to filter the second drop down based on the selected value in first drop down. I can't use the PHP code which uses the DB callback methods. in my script I have something like this.

   $("#Group").change(function() {
     var groupVal = $(this).find("option:selected").val();
     $('#subGroup option').filter(function( {return!$(this).val().indexOf(groupVal)!=-1);}).remove();
    });

the script is working fine, it removes all the options other then the one selected. but my problem is that next time when i select other value in first drop down, second drop down goes empty. I even worked with hide/show but guess they wont work with <select> :(

is there any way by which I can repopulate the second drop down when I selected some other option in first drop down?

Answer 1

Store all the options for the second select box into a array when the page loads. Then populate the select box from that array on change. You are removing the second "batch" of options so they don't exists any more the next time you want to use them.

Answer 2

If you are removing elements, you aren't getting them back. Use hide() and show() as you yourself suggested:

$("#Group").change(function() {
    var groupVal = $(this).find("option:selected").val();
    $('#subGroup option').hide();
    $('#subGroup option[value^='+groupVal+']').show();
});

In other words, every time the #Group selectbox is changed, hide all options in #subGroup and show only the ones whose value attribute starts with groupVal.

Answer 3

In order to do that you need to store all available options somewhere and then repopulate from that data set. for example

 var availableOptions = {
    'groupOne': {/* options as {value: '', text: ''} */},
    'groupTwo': {/* options as {value: '', text: ''} */}
  };

  $("#Group").change(function() { 
    var groupVal = $(this).find("option:selected").val(); 
    var sub = $('#Subgroup');
    $.each(availableOptions[groupVal], function(i, data){
      sub.append('<option value="'+data+'">'+data.text+'</option>');
  });

Answer 4

There's also a related select box plugin by Remy sharp that I've had success with if you want to try:

http://remysharp.com/2007/09/18/auto-populate-multiple-select-boxes/