показать/скрыть выпадающие предметы, основанные на предыдущем выпадающем списке

Question

- - отредактирован, так как я описал его неправильно в первый раз, извините! - -

Привет,

я пытаюсь использовать показать/скрыть, чтобы управлять тем, что показано во втором раскрывающемся меню, основываясь на том, что выбран в первом раскрывающемся меню. Однако после того, как он работает ненадолго, теперь он не просматривается ни в каком браузере, он просто показывает их всем независимо от того, что выбрано. Когда в первом меню выбрана опция, она должна отображать определенные параметры во втором меню. Каждый аэропорт имеет собственный набор мест назначения. К сожалению, это не вариант базы данных PHP/MySQL для этого:/

в JS выглядит следующим образом:

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

И HTML на выпадающие выглядит следующим образом:

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

ли есть ли вопиющие ошибки? или, может быть, лучшие способы достичь этого?

Любая помощь очень ценится!

веселит, Пол

Answer 1

Вот сценарий, который будет препятствовать тому, чтобы оба выпадающего списка были одинаковыми, кроме обоих. Опция в B всегда будет отключена, если выбрана соответствующая опция в A.

Протестировано в IE8 и FF3.5 и в 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: Я удалил все идентификаторы параметров, поскольку они не требуются для моих кодов, восстановить его обратно, если это необходимо.

Answer 2

Взгляните на этот ответ я дал на аналогичный вопрос:

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

Он должен отлично работать для вас, и я также в конце появилась ссылка на рабочий пример.