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

とウェブページのタラE：あなたがする必要があるすべてはonclickのリスナー（およびいくつかの入力処理）とボタンを追加し、第三のドロップダウンから値を読んでよう

<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

に思えます。 3番目のドロップダウンに値が設定されるまで、ボタンは無効になります。これは、ユーザーが選択した場合、彼らは

以下の選択が再び無効にする必要があり「を選択してください」（同様にボタンを提出する）再選択するとき

は、私はまた、ユーザーの入力を持ついくつかのバグを修正「を選択してください」再び無効になります

そして、第三のオプションはここで

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

を選択したときに、それがリダイレクトを行っているように見えるhtmlファイルからこのコードを削除するには、

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

例です