提交依赖于jquery的下拉菜单按钮

Question

大家好，所以我最近不得不为一个多级下拉菜单完成一些代码 - 大部分代码来自以前的开发人员而且我对Jquery本身很不熟悉所以它给了我很多麻烦

基本上我需要发生的是当用户从最后一个下拉列表中选择该选项时，他们然后单击一个按钮，并根据最后一个下拉列表的信息打开一个特定页面。当前发生的是他们选择页面自动启动的最后一个选项的那一刻。我试图让一个按钮与代码一起工作的所有尝试都是无用的 - 尽管如此，这是我对它几乎一无所知的东西。

任何帮助都将受到重视

这是我目前在下面的所有代码（减少每个下拉级别的条目数，但其他方面完全相同）：

Jquery的：

$(function(){

  var $cat = $("#category1"),
      $subcat = $("#category2"),
      $volt = $("#category3");

      $cat.on("change",function(){
        var _rel = $(this).val();
        $subcat.find("option").attr("style","");
        $subcat.val("");
        if(!_rel) return $subcat.prop("disabled",true);
        $subcat.find("[rel="+_rel+"]").show();
        $subcat.prop("disabled",false);
      });

      $subcat.on("change",function(){
      debugger;
        var _rel = $(this).val();
        $volt.find("option").attr("style","");
        $volt.val("");
        if(!_rel) return $volt.prop("disabled",true);
        $volt.find("[rel="+_rel+"]").show();
        $volt.prop("disabled",false);
      });

});

我的css：

#category2 option{
    display:none;
}

#category2 option.label{
    display:block;
}

#category3 option{
    display:none;
}

#category3 option.label{
    display:block;
}

和网页代码：

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<form id="formname" name="formname" method="post" action="submitform.asp" >
<table width="50%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="41%" align="right" valign="middle">First Dropdown Menu:</td>
<td width="59%" align="left" valign="middle">
<select name="category1" id="category1">
<option value="">Please Select</option>
<option value="Option1">ONE</option>
                  <option value="Option2">TWO</option>
                  <option value="Option3">THREE</option>
                  <option value="Option4">FOUR</option>
              </select>
          </td>
      </tr>
<form id="formname1" name="formname1" method="post" action="submitform.asp" >
<tr>
          <td align="right" valign="middle">Second Dropdown Menu:</td>
          <td align="left" valign="middle">
              <select disabled="disabled" id="category2" name="category2">
                  <option class="label" value>Please Select</option>
<!-- R -->
<option rel="Option1" value="R12">12</option>
<option rel="Option1" value="R24">24</option>
<option rel="Option1" value="R36">36</option>
                  <option rel="Option1" value="R48">48</option>
                  <option rel="Option1" value="R80">80</option>
</select>
</td>
</tr>
<form id="formname2" name="formname2" method="post" action="submitform.asp" >
<tr>
          <td align="right" valign="middle">Third Dropdown Menu</td>
          <td align="left" valign="middle">
              <select disabled="disabled" id="category3" name="category3">
<option class="label" value>Please Select</option>
<!-- R -->
                  <option rel="R12" value="http://www.yourwebsite.com">R12V1</option>
                  <option rel="R24" value="http://www.yourwebsite1.com">R24V1</option>
                  <option rel="R36" value="http://www.yourwebsite2.com">R36V1</option>
                  <option rel="R48" value="http://www.yourwebsite3.com">R48V1</option>
              </select>
</td>
</tr>
      <script type="text/javascript">
 var urlmenu = document.getElementById( 'category3' );
 urlmenu.onsubmit = function() {
  window.open( this.options[ this.selectedIndex ].value );
 };
</script>  
  </table>
</form>
</html>

Answer 1

看起来您需要做的就是添加一个带onclick监听器的按钮（以及一些输入处理）并从第3个下拉列表中读取值。该按钮将被禁用，直到第3个下拉列表具有值。如果用户选择＆＃34;请选择＆＃34;

，它将再次禁用

我还修复了一些用户输入的错误，当他们重新选择＆＃34;请选择＆＃34;应再次禁用以下选项（以及提交按钮）

从html文件中删除此代码，当选择第3个选项时，它看起来正在进行重定向

<script type="text/javascript">
 var urlmenu = document.getElementById( 'category3' );
 urlmenu.onsubmit = function() {
  window.open( this.options[ this.selectedIndex ].value );
 };
</script> 

这是一个例子

＆＃13;

＆＃13;

$(document).ready(function() {
  var $cat = $("#category1"),
    $subcat = $("#category2"),
    $volt = $("#category3"),
    $submitButton = $("#submitButton");

  $cat.on("change", function() {
    var _rel = $(this).val();
    $subcat.find("option").attr("style", "");
    $subcat.val("");
    $volt.val("");
    $submitButton.prop("disabled", true);
    if (!_rel) {
      $subcat.prop("disabled", true);
      $volt.prop("disabled", true);
      return;
    }
    $subcat.find("[rel=" + _rel + "]").show();
    $subcat.prop("disabled", false);
  });

  $subcat.on("change", function() {
    var _rel = $(this).val();
    $volt.find("option").attr("style", "");
    $volt.val("");
    $submitButton.prop("disabled", true)
    if (!_rel) {
      $volt.prop("disabled", true);
      return;
    }
    $volt.find("[rel=" + _rel + "]").show();
    $volt.prop("disabled", false);
  });

  $volt.on("change", function() {
    var _rel = $(this).val();
    if (!_rel) {
      $submitButton.prop("disabled", true);
      return;
    }
    $submitButton.prop("disabled", false); // allow the user to submit
  });

  $submitButton.on("click", function() {
    console.log("Send me to: " + $volt.val());
    // window.open( $volt.val() );
  });
});

＆＃13;

#category2 option {
  display: none;
}

#category2 option.label {
  display: block;
}

#category3 option {
  display: none;
}

#category3 option.label {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formname" name="formname" method="post" action="submitform.asp">
  <table width="50%" border="0" cellspacing="0" cellpadding="5">
    <tr>
      <td width="41%" align="right" valign="middle">First Dropdown Menu:</td>
      <td width="59%" align="left" valign="middle">
        <select name="category1" id="category1">
          <option value="">Please Select</option>
          <option value="Option1">ONE</option>
          <option value="Option2">TWO</option>
          <option value="Option3">THREE</option>
          <option value="Option4">FOUR</option>
        </select>
      </td>
    </tr>
    <form id="formname1" name="formname1" method="post" action="submitform.asp">
      <tr>
        <td align="right" valign="middle">Second Dropdown Menu:</td>
        <td align="left" valign="middle">
          <select disabled="disabled" id="category2" name="category2">
            <option class="label" value>Please Select</option>
            <!-- R -->
            <option rel="Option1" value="R12">12</option>
            <option rel="Option1" value="R24">24</option>
            <option rel="Option1" value="R36">36</option>
            <option rel="Option1" value="R48">48</option>
            <option rel="Option1" value="R80">80</option>
          </select>
        </td>
      </tr>
      <form id="formname2" name="formname2" method="post" action="submitform.asp">
        <tr>
          <td align="right" valign="middle">Third Dropdown Menu</td>
          <td align="left" valign="middle">
            <select disabled="disabled" id="category3" name="category3">
              <option class="label" value>Please Select</option>
              <!-- R -->
              <option rel="R12" value="http://www.yourwebsite.com">R12V1</option>
              <option rel="R24" value="http://www.yourwebsite1.com">R24V1</option>
              <option rel="R36" value="http://www.yourwebsite2.com">R36V1</option>
              <option rel="R48" value="http://www.yourwebsite3.com">R48V1</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>
            <button type="button" id="submitButton" disabled>Submit</button>
          </td>
        </tr>
  </table>
  </form>

＆＃13;

＆＃13;

＆＃13;