提交按钮jQuery的依赖下拉菜单

问题描述：

大家好所以我最近完成了一个多层次的下拉菜单中的一些代码 - 大部分的代码是从以前的开发者，我很熟悉jQuery的本身，以便它一直给我很多麻烦。提交按钮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>

答

好像所有你需要做的就是添加一个按钮，一个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>

嘿感谢您的回答！虽然我遇到了一些问题。该按钮将出现，并且下拉菜单仍然有效，但该按钮保持灰显并且不可点击。如果我更改页面上的脚本SRC到新的您提供的（）那么一切都完全停止工作，没有下拉等等。有什么明显的我做错了？ – Rob

@Rob我的代码的工作方式是按钮是灰色，直到你选择所有3个下拉菜单中的值（我可以帮助改变这一点，如果你喜欢）。如果你明白这一点，那么当你包含jQuery 2.1.1脚本并打开html页面时，是否会遇到任何控制台错误？在Chrome中，您可以打开控制台打开F12 –

该按钮呈灰色状态，直到选定值为止！即使选择了这个值，它也不会变灰。当我打开控制台时，它只是一个空白的框。感谢所有的帮助！ – Rob

提交按钮jQuery的依赖下拉菜单

相关推荐