提交按鈕jQuery的依賴下拉菜單

Question

大家好所以我最近完成了一個多層次的下拉菜單中的一些代碼 - 大部分的代碼是從以前的開發者，我很熟悉jQuery的本身，以便它一直給我很多麻煩。

基本上我需要發生的情況是，當用戶選擇從最後下拉列表中選擇，他們然後點擊一個按鈕，和特定的頁面打開取決於最後一個下拉的信息。目前發生的是他們選擇頁面自動啓動的最後一個選項。我所有嘗試使用代碼的按鈕都是無用的 - 儘管這也是我所知甚少的。

任何幫助，將majorly讚賞

這裏就是我現在有下面的代碼（削減每下拉級條目的數量，但否則是完全相同）：

的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; 
} 

和網頁鱈魚E：

<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監聽器（和一些輸入處理）和讀取從第三下拉列表中值。該按鈕將被禁用，直到第三個下拉列表中有一個值。這將再次被禁用，如果用戶選擇「請選擇」

我也固定用戶輸入的一些錯誤，當他們重新選擇「請選擇」下面選擇應再次禁用（以及提交按鈕）

，並刪除從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>