bouton submit pour le menu déroulant jquery dependent

Question

Salut tout le monde, donc j'ai récemment dû finir du code pour un menu déroulant à plusieurs niveaux - la majorité du code provient d'un développeur précédent et je ne suis pas familier avec Jquery lui-même, donc c'est m'a donné beaucoup d'ennuis. Fondamentalement, ce que je dois faire est lorsque l'utilisateur sélectionne l'option de la dernière liste déroulante, puis cliquez sur un bouton, et une page spécifique s'ouvre en fonction des informations de la dernière liste déroulante. Ce qui se passe actuellement est le moment où ils sélectionnent la dernière option que la page lance automatiquement. Toutes mes tentatives pour faire fonctionner un bouton avec le code ont été plutôt inutiles - bien que, encore une fois, c'est quelque chose que je connais très peu.

Toute aide serait appréciée majorly

est ici tout le code que je en ai ci-dessous (réduire le nombre d'entrées par niveau de menu déroulant, mais est par ailleurs exactement la même):

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

}); 

Mon css:

#category2 option{ 
    display:none; 
} 

#category2 option.label{ 
    display:block; 
} 

#category3 option{ 
    display:none; 
} 

#category3 option.label{ 
    display:block; 
} 

et la morue de page Web 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

Il semble que tout ce que vous devez faire est d'ajouter un bouton avec un écouteur onclick (et une manipulation d'entrée) et lire la valeur de la 3ème menu déroulant. Le bouton sera désactivé jusqu'à ce que la 3ème liste déroulante ait une valeur. Il sera désactivé à nouveau si l'utilisateur sélectionne « S'il vous plaît Sélectionnez »

J'ai aussi fixé quelques bugs avec l'entrée d'utilisateur lorsqu'ils RESELECT « S'il vous plaît Sélectionnez » les ci-dessous devraient correspondre être désactivés à nouveau (ainsi que le bouton Soumettre)

Et

supprimer ce code du fichier HTML qui ressemble à ce fait la redirection lorsque la 3ème option est sélectionnée

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

Voici un exemple

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