JavaScript-根據從下拉列表中選擇的值重定向到頁面

Question

我有兩個帶有選擇值的下拉列表。 我已經完成了功能部分，在這兩個下拉列表中選擇的值將顯示在testPoint.html頁面中（如功能所示）。 現在，我想根據“配置Profile下拉列表中選擇的配置文件分隔頁面。

例如，當用戶從下拉列表中選擇“ FULL”選項時，頁面將被重定向到“ testPointDRC.html”

在這方面需要幫助。

 (function() { function onSubmitClicked(event) { var product = document.getElementById('product'), productVal = product.value, profile = document.getElementById('profile'), profileVal = profile.value; url = 'testPoint.html?product=' + encodeURIComponent(productVal) + '&profile=' + encodeURIComponent(profileVal); location.href = url; if (profileVal = "Full DRC") { url = "testPointDRC.asp"; } } var submitButton = document.getElementById('btngo'); submitButton.addEventListener('click', onSubmitClicked); })(); 

 <table> <tr> <td> <h4>Choose a Product &nbsp: </h4> <select id="product"> <optgroup label="DEFAULT"> <option value = "NONE">NONE</option> </optgroup> </select> <br><br> <h4>Choose a Profile &nbsp&nbsp&nbsp: </h4> <select id="profile"> <optgroup label="DEFAULT"> <option value = "NONE">NONE</option> </optgroup> <optgroup label="TEST PROFILES"> <option value = "Full">FULL</option> <option value = "QC">QC</option> <option value = "Cold">COLD</option> <option value = "Hot">HOT</option> <option value = "Room">ROOM</option> </optgroup> </select> </td> </tr> </table> <br><br><br> <input type="submit" id="btngo" value="Go" class="button button2" /> 

Answer 1

檢查條件后，將您的location.href = url放置到。

 url = some_url;
 If(condition){
   url= new_url;
 }
 location.href=url;

這將為您工作。

Answer 2

提出您的想法並使用JQuery和純JavaScript創建以下代碼。

 $(document).ready(function() { $('#btngo').on('click', function() { var profile = $('.profile').find('option:selected').val(), prod = $('.product').find('option:selected').val(), url; switch (profile) { case 'Full': url = "testPointFULL.asp?product=" + prod + "&profile=" + profile; break; case 'QC': url = "testPointQC.asp?product=" + prod + "&profile=" + profile; break; case 'Cold': url = "testPointCOLD.asp?product=" + prod + "&profile=" + profile; break; case 'Hot': url = "testPointHOT.asp?product=" + prod + "&profile=" + profile; break; case 'Room': url = "testPointROOM.asp?product=" + prod + "&profile=" + profile; break; default: alert("No option like this"); } if (prod !== "NONE" && profile !== "NONE") { window.open(url); alert(url); $(this).submit(); } else { alert('Selection was not correct'); } }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h4>Choose a Product:</h4> <select class="product"> <optgroup label="DEFAULT"> <option value="NONE">NONE</option> <option value="Test">Test</option> </optgroup> </select> <br> <br> <h4>Choose a Profile : </h4> <select class="profile"> <optgroup label="DEFAULT"> <option value="NONE">NONE</option> </optgroup> <optgroup label="TEST PROFILES"> <option value="Full">FULL</option> <option value="QC">QC</option> <option value="Cold">COLD</option> <option value="Hot">HOT</option> <option value="Room">ROOM</option> </optgroup> </select><br><br> <input type="button" id="btngo" value="Go" class="button button2" /> 

純JavaScript

 document.getElementById("prod").addEventListener("submit", openNew); function openNew() { var prod = document.getElementById("product"), prodSel = prod.options[prod.selectedIndex].value, prof = document.getElementById("profile"), profSel = prof.options[prof.selectedIndex].value, url; // alert(profSel); switch (profSel) { case 'Full': url = "testPointFULL.asp?product=" + prodSel + "&profile=" + profSel; break; case 'QC': url = "testPointQC.asp?product=" + prodSel + "&profile=" + profSel; break; case 'Cold': url = "testPointCOLD.asp?product=" + prodSel + "&profile=" + profSel; break; case 'Hot': url = "testPointHOT.asp?product=" + prodSel + "&profile=" + profSel; break; case 'Room': url = "testPointROOM.asp?product=" + prodSel + "&profile=" + profSel; break; default: alert("No option like this"); } if (prodSel !== "NONE" && profSel !== "NONE") { window.open(url); alert(url); } else { alert('Selection was not correct'); } } 

 <form id="prod"> <h4>Choose a Product:</h4> <select id="product"> <optgroup label="DEFAULT"> <option value="NONE">NONE</option> <option value="test">Test</option> </optgroup> </select> <br> <br> <h4>Choose a Profile : </h4> <select id="profile"> <optgroup label="DEFAULT"> <option value="NONE">NONE</option> </optgroup> <optgroup label="TEST PROFILES"> <option value="Full`">FULL</option> <option value="QC">QC</option> <option value="Cold">COLD</option> <option value="Hot">HOT</option> <option value="Room">ROOM</option> </optgroup> </select> <br> <br> <input type="submit" id="btngo" value="Go" class="button button2" /> </form> 

我剛剛添加了alert()來向您展示它的工作原理，由於某些原因該代碼段未顯示重定向。

這里的任何方法都是有效的jsFiddle 。

純JavaScript jsFiddle