afficher/masquer les éléments de liste déroulante en fonction de la sélection de la liste déroulante précédente

Question

- - édité comme je l'ai décrit incorrectement la première fois, désolé! - -

Salut,

je suis en train d'utiliser montrer/cacher pour manipuler ce qui est montré dans un second menu déroulant, en fonction de ce qui est sélectionné dans le premier menu déroulant. Cependant, après l'avoir fait fonctionner brièvement, il ne se trouve maintenant dans aucun navigateur, il les montre tous, peu importe ce qui est sélectionné. Lorsqu'une option est sélectionnée dans le premier menu, elle doit ensuite afficher des options particulières dans le second menu. Chaque aéroport possède ses propres destinations. Malheureusement, il n'y a pas une option de base de données php/mysql pour cela:/

les js se présente comme suit:

$(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(); 
    }); 
}); 

Et le code html sur les listes déroulantes est comme suit:

<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> 

Est-ce Y a-t-il des erreurs flagrantes? ou peut-être de meilleurs moyens pour y parvenir?

Toute aide est très appréciée!

applaudissements, Paul

Answer 1

Voici le script qui empêchera les deux listes déroulantes d'être identiques, les deux étant vides. L'option dans B sera toujours désactivée si la correspondante dans A est sélectionnée.

Testé dans IE8 et FF3.5 et 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: Je l'ai enlevé tous les ID des options qu'ils ne sont pas nécessaires pour mes codes, le restaurer si nécessaire.

Answer 2

Jetez un oeil à cette réponse que je donnais à une question similaire:

Removing and adding options from a group of select menus with jQuery

Il devrait fonctionner parfaitement pour vous, et je l'ai aussi fourni un lien vers un exemple de travail à la fin.