show/hide dropdown items based on previous dropdown selection

Question

- - edited as i described it incorrectly first time round, sorry! - -

Hi,

i am trying to use show/hide to manipulate what is shown in a second dropdown menu, based on what is selected in the first dropdown menu. However after having it work briefly, it now doesn't across any browser, it just shows them all no matter what is selected. When an option is selected in the first menu, it needs to then display particular options in the second menu. Each airport has it's own set of destinations. Unfortunately there isn't a php/mysql database option for this :/

the js is as follows:

$(document).ready(function(){

$("#from_BLANK").click(function () {
        $("#to_A1").show();
        $("#to_A2").show();
        $("#to_A3").show();
    });
    $("#from_A1").click(function () {
        $("#to_A1").hide();
        $("#to_A2").show();
        $("#to_A3").show();
    });
    $("#from_A2").click(function () {
        $("#to_A1").show();
        $("#to_A2").hide();
        $("#to_A3").show();
    });
    $("#from_A3").click(function () {
        $("#to_A1").show();
        $("#to_A2").show();
        $("#to_A3").hide();
    });
});

And the html on the dropdowns is as follows:

<select name="depApt" id="depApt">
    <option id="from_BLANK" selected="selected">&nbsp;</option>
    <option id="from_A1" value="A1">Airport One</option>
    <option id="from_A2" value="A2">Airport Two</option>
    <option id="from_A3" value="A3">Airport Three</option>
</select>

<select name="dstApt" id="dstApt">
    <option id="to_BLANK" selected="selected">&nbsp;</option>
    <option id="to_A1" value="A1">Airport One</option>
    <option id="to_A2" value="A2">Airport Two</option>
    <option id="to_A3" value="A3">Airport Three</option>
</select>

Are there any glaring errors? or maybe better ways to achieve this?

Any and all help most appreciated!

cheers, Paul

Answer 1

Take a look at this answer I gave to a similar question:

http://stackoverflow.com/questions/2008287/removing-and-adding-options-from-a-group-of-select-menus-with-jquery/2008350#2008350

It should work perfectly for you, and I've also supplied an link to a working example at the end.

Answer 2

Here's the script which will prevent both dropdown from being the same other than both are blank. The option in B will always be disabled if the corresponding one in A is selected.

Tested in IE8 and FF3.5 and Chrome.

Javascript:

 <script type="text/javascript" >
    $(function() {
    $('#depApt').click(function(){
        var idx = $(this).attr("selectedIndex") + 1;
        $('#dstApt option').removeAttr('disabled');
        if($('#dstApt').attr("selectedIndex") == idx - 1)
          $('#dstApt').attr("selectedIndex", 0)
        $('#dstApt option:nth-child(' + idx + ')').attr('disabled', 'disabled');
      }
    );
    });
  </script>

HTML:

<select name="depApt" id="depApt">
  <option>&nbsp;</option>
  <option value="A1">Airport One</option>
  <option value="A2">Airport Two</option>
  <option value="A3">Airport Three</option>
</select>

<select name="dstApt" id="dstApt">
  <option>&nbsp;</option>
  <option value="A1">Airport One</option>
  <option value="A2">Airport Two</option>
  <option value="A3">Airport Three</option>
</select>

PS: I've removed all the IDs of the options as they are not required for my codes, restore it back if needed.