2動態下拉鍊接

Question

我試圖創建兩個下拉框，這樣當你從第一個選擇一個值時，第二個填充值取決於第一個值。我從about.com獲得了第一部分的代碼，但無法弄清楚如何將第二個下拉列表鏈接到網頁。

例如，我想將「首選項 - 選項一」鏈接到google.com，並將「首選項 - 選項二」鏈接到yahoo.com。我在哪裏包含代碼中的鏈接？

這裏是代碼：

<form name="myform"> 
    <div align="center"> 
    <select name="optone" size="1" onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value);"> 
     <option selected="selected" value=" "></option> 
     <option value="1">First Choice</option> 
     <option value="2">Second Choice</option> 
     <option value="3">Third Choice</option> 
    </select> 

    <select name="opttwo" size="1"> 
     <option selected="selected" value=" ">Please select one of the options above first</option> 
    </select> 
    </div> 
</form> 

<script type="text/javascript"> 
function setOptions(chosen) { 
    var selbox = document.myform.opttwo; 
    selbox.options.length = 0; 
    if (chosen == " ") { 
    selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' '); 
    } 
    if (chosen == "1") { 
    selbox.options[selbox.options.length] = new 
    Option('first choice - option one','oneone'); 
    selbox.options[selbox.options.length] = new 
    Option('first choice - option two','onetwo'); 
    } 
    if (chosen == "2") { 
    selbox.options[selbox.options.length] = new 
    Option('second choice - option one','twoone'); 
    selbox.options[selbox.options.length] = new 
    Option('second choice - option two','twotwo'); 
    } 
    if (chosen == "3") { 
    selbox.options[selbox.options.length] = new 
    Option('third choice - option one','threeone'); 
    selbox.options[selbox.options.length] = new 
    Option('third choice - option two','threetwo'); 
    } 
} 
</script> 

http://jsbin.com/iquyo5/57/

可能有人給我一個代碼示例？非常感謝幫助，謝謝。

Answer 1

試試這個..

function setOptions(chosen) { 
    var selbox = document.myform.opttwo; 

selbox.options.length = 0; 
if (chosen == " ") { 
    selbox.options[selbox.options.length] = new 
Option('Please select one of the options above first',' '); 

} 
if (chosen == "1") { 
    selbox.options[selbox.options.length] = new 
Option('select one',''); 
    selbox.options[selbox.options.length] = new 
    Option('first choice - option one','http://www.google.co.in'); 
    selbox.options[selbox.options.length] = new 
    Option('first choice - option two','http://www.Yahoo.com'); 
} 
if (chosen == "2") { 
    selbox.options[selbox.options.length] = new 
Option('select one',''); 
    selbox.options[selbox.options.length] = new 
Option('second choice - option one','twoone'); 
    selbox.options[selbox.options.length] = new 
Option('second choice - option two','twotwo'); 
} 
if (chosen == "3") { 
    selbox.options[selbox.options.length] = new 
Option('select one',''); 
    selbox.options[selbox.options.length] = new 
Option('third choice - option one','threeone'); 
    selbox.options[selbox.options.length] = new 
Option('third choice - option two','threetwo'); 
} 
} 

Answer 2

將邏輯與$.change()事件綁定。並從$.val()獲取當前值到
確定用戶想要重定向到的位置。

此示例假定位置直接存儲在值本身中。

$(".mySelect").change(function(e){ 
    window.location = $(this).val(); 
}); 

Answer 3

使用此代碼：

var selectEle = document.getElementsByName('opttwo')[0]; 
selectEle.onchange = function(){ 
    var val = selectEle.options[selectEle.selectedIndex].text; 
    alert(val); 
    switch(val) { 
    case "first choice - option one": 
     location.href="http://www.google.com"; 
     break; 
    case "first choice - option two": 
     location.href="http://www.google.com"; 
     break; 
    } 
};