jquery prev проблемы при работе с выпадающим списком

Question

Это мой первый вопрос здесь, так что любое направление для того, чтобы лучше спросить, ценится, и, конечно, любая помощь тем более.:-)

Я работаю с поведением Drupal и jquery, чтобы настроить навигацию для длинной формы. (Форма создается с использованием формы лица)

У меня есть три раскрывающихся списка (один сверху, один в боковой панели, второй под формой), которые пользователь может использовать для перехода с одной "страницы" на другую. Раскрывающийся список внизу также включает кнопки "Предыдущая" и "Следующая".

Моя проблема заключается в том, что все нижние выпадающие и предыдущие и следующие кнопки не работают должным образом. Проблемы заключаются в следующем:

• При выборе элемента из нижнего выпадающего списка он не меняет содержимое (Добавление и удаление класса hidden). Верхний и боковой дропбар работает
• При нажатии "Далее" я перехожу на следующую страницу. Однако, когда я нажимаю предыдущий, я перехожу на первую страницу, и следующая кнопка также больше не работает.

Я попытался создать JSfiddle. Он имеет правильную разметку HTML, но я не могу заставить JS работать, возможно, потому что он был создан для поведения drupal. Живая версия может быть найдена здесь. Я экспериментировал с prevAll() и nextAll () вместо prev () и next (), но не получил никаких улучшений. И я довольно растерялся из-за того, что нижний выпадающий список не работает, когда другие.

HTML-разметка

<div class="preform">
  <select id="topnav" class="navdrop">
    <option>title1</option>
    <option>title2</option>
    <option>title3</option>
  </select>
</div>
<div id="form">
  <div class="row">
    <div class="col1">
      <div class="page">
        <h3>title1</h3>
        [some content]  
      </div>
      <div class="page">
        <h3>title2</h3>
        [some content]
      </div>
      <div class="page">
        <h3>title3</h3>
        [some content]
      </div>
    </div>
    <div class="col2">
      <div class="static">
        <select id="bottomnav" class="navdrop">
    <option>title1</option>
    <option>title2</option>
    <option>title3</option>
  </select>
      </div>
    </div>
  </div>
</div>
<div id="form-nav">
  <input value="Previous" type="button" class="btn btn-default" id="buttonPrev">
  <select id="bottomnav" class="navdrop">
    <option>title1</option>
    <option>title2</option>
    <option>title3</option>
  </select>
  <input value="Next" type="button" class="btn btn-default" id="buttonNext">
</div>

JQuery, который запускается один раз при загрузке страницы для настройки условий запуска

 $('#edit-actions',context).once('gotButtons', function() {

    /* hides pages and shows welcome page on first load */
    $(".page").addClass("hidden");
    $("h3:contains('title1')").parent().removeClass("hidden");
    $("#buttonPrev",context).prop('disabled', true);
    $(".nav-drop > option:selected").attr("selected","selected");

  });

JQuery об изменении выпадающего события

$(".nav-drop",context).change(function() {
    /* hides everything */
    $(".page").addClass("hidden");

    /* unhides the selected item */
    var item = this.value;
    $('.page h3').filter(function(){ 
      return($(this).text() == item);
    }).parent().removeClass("hidden");

    /* update all dropdowns to the chosen value */
    $(".nav-drop",context).val(item);

    /* Disable first and last button */
    var isFirstElementSelected = $('#topnav > option:selected').index() === 0;
    var isLastElementSelected = $('#topnav > option:selected').index() == $('#topnav > option').length -1;

    if (isFirstElementSelected) {
      $("#buttonPrev",context).prop('disabled', true);
      $("#buttonNext",context).prop('disabled', false);
    } else if (isLastElementSelected) {     
      $("#buttonPrev",context).prop('disabled', false);
      $("#buttonNext",context).prop('disabled', true);
    } else {
      $("#buttonPrev",context).prop('disabled', false);
      $("#buttonNext",context).prop('disabled', false);
    }
  });

JQuery для кнопки нажал

/* Adds next/prev functionality */
  $("#buttonNext").click(function() {
    $('.nav-drop > option:selected').removeAttr('selected').next('option').attr('selected', 'selected');  

    $(".nav-drop",context).trigger("change");
  });

  $("#buttonPrev").click(function() {
    $('.nav-drop > option:selected').removeAttr('selected').prevAll('option').attr('selected', 'selected');

    $(".nav-drop",context).trigger("change");
  });

Заранее спасибо за помощь!