Javascript 使用下拉列表时，jquery prev会出现问题

这是我在这里提出的第一个问题，因此，我们非常感谢任何提出更好问题的指导，当然，任何帮助都更是如此。：-）

我正在使用Drupal行为和jquery为长表单设置导航。（表单是使用entityform创建的）

我有三个下拉列表（一个在顶部，一个在侧栏，一个在表单下方），用户可以使用它们从一个“页面”导航到另一个“页面”。底部的下拉列表还包括上一个和下一个按钮

我的问题是，所有的底部下拉按钮和上一个和下一个按钮都不能正常工作。问题如下：

• 当从底部下拉列表中选择一个元素时，它不会改变 内容（添加和删除类

  隐藏的
  ）。顶部和侧面
  dropbar工作

• 单击“下一步”时，我将进入下一页。但是，当我单击“上一页”时，我会进入第一页，“下一页”按钮也不再起作用

我曾尝试创建一个具有正确HTML标记的JS，但我无法让JS正常工作，可能是因为它是为drupal行为而设计的。可以找到实时版本。 我尝试了preval（）和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对下拉事件的更改

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

提前感谢您的帮助

/* 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");
  });