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個下拉列表中讀取值。 該按鈕將被禁用，直到第三個下拉列表中有一個值。 如果用戶選擇“請選擇”，它將再次禁用

當用戶重新選擇“請選擇”時，我還修復了一些用戶輸入的錯誤，應再次禁用以下選擇（以及“提交”按鈕）

並從html文件中刪除此代碼，當選擇第三個選項時，該文件看起來像是在進行重定向

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

這是一個例子

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

 #category2 option { display: none; } #category2 option.label { display: block; } #category3 option { display: none; } #category3 option.label { display: block; } 

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