показать / скрыть выпадающие элементы на основе предыдущего выпадающего списка - PullRequest
0 голосов
/ 12 января 2010

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

Привет

Я пытаюсь использовать show / hide для манипулирования тем, что отображается во втором раскрывающемся меню, на основе того, что выбрано в первом раскрывающемся меню. Однако после краткой работы он теперь не отображается ни в одном браузере, он просто показывает их все, независимо от того, что выбрано. Когда опция выбрана в первом меню, она должна затем отображать определенные опции во втором меню. Каждый аэропорт имеет свой собственный набор пунктов назначения. К сожалению, для этого нет опции базы данных 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>

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

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

веселит, Пол

Ответы [ 2 ]

0 голосов
/ 12 января 2010

Вот сценарий, который не даст раскрыться обоим раскрывающимся спискам, кроме того, что они пустые. Опция в 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: Я удалил все идентификаторы опций, поскольку они не требуются для моих кодов, восстановите их, если необходимо.

0 голосов
/ 12 января 2010

Посмотрите на ответ, который я дал на аналогичный вопрос:

Удаление и добавление опций из группы меню выбора с помощью jQuery

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...