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"> 
 
\t <optgroup label="DEFAULT"> 
 
\t <option value = "NONE">NONE</option> 
 
\t </optgroup> 
 
\t </select> 
 
     <br><br> 
 

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

Answer 1

採用了您的想法並使用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

Answer 2

將您location.href = URL來檢查病情後。 url = some_url; If(condition){ url= new_url; } location.href=url; 這將爲你工作。