調用從下拉JavaScript函數下來

Question

我眼前這個HTML代碼：

Theme 
<ul id="dropdown"> 
    <li> Choose theme 
     <ul> 
      <li id="stylesheet1" > <a href="#"> Default </a></li> 
      <li id="stylesheet2" > <a href="#"> Theme 1 </a></li> 
      <li id="stylesheet3" > <a href="#"> Theme 2 </a></li> 
      <li id="stylesheet4" > <a href="#"> Theme 3 </a></li> 

     </ul> 
    </li> 
</ul> 

，並在獨立的JavaScript文件我有這樣的代碼：

function initate() 
{ 

document.getElementById("myList").onchange = function() { 
    var sheet=document.getElementById("myList").value; 

    if(sheet=="one"){ 
    setActiveStyleSheet("theme1"); 
    } 
    else if(sheet=="two"){ 
    setActiveStyleSheet("theme2"); 
    } 
    else if(sheet="three"){ 
    setActiveStyleSheet("theme3"); 
    } 
    else{ 
    setActiveStyleSheet("default"); 
    } 
    return false 
}; 

} 

window.onload = initate; 

現在這個工作不錯，但不是我在上面使用我的下拉想使用這個HTML代碼來代替：

Select Theme 
<form> 
<select id="myList" > 
    <option id="stylesheet1">Default</option> 
    <option id="stylesheet2">Theme 1</option> 
    <option id="stylesheet3">Theme 2</option> 
    <option id="stylesheet4">Theme 3</option> 
</select> 
<form> 

正如之前我想有我的事件處理程序在我單獨的JavaScript文檔中。我嘗試將我的javascript替換爲這些功能：

document.getElementById("stylesheet1").onchange = function() { 
    setActiveStyleSheet("default"); 
    return false 
}; 

但它不起作用。你如何以這種方式改正呼叫功能？

Answer 1

演示：http://jsfiddle.net/zYMFa/

的選項使用價值和處理select變化事件。 select的value屬性獲取所選選項的值，因此您可以在change函數中使用this.value。

<form> 
<select id="myList" > 
    <option value="default">Default</option> 
    <option value="theme1">Theme 1</option> 
    <option value="theme2">Theme 2</option> 
    <option value="theme3">Theme 3</option> 
</select> 
<form> 

document.getElementById("myList").onchange = function() { 
    setActiveStyleSheet(this.value); 
    return false 
}; 

Answer 2

<select id="myList" > 
    <option id="stylesheet1" value="default">Default</option> 
    <option id="stylesheet2" value="one">Theme 1</option> 
    <option id="stylesheet3" value="two">Theme 2</option> 
    <option id="stylesheet4" value="three">Theme 3</option> 
</select> 

document.getElementById("myList").onchange = function() { 
    var sheet=document.getElementById("myList").value; 

    if(sheet=="one"){ 
    setActiveStyleSheet("theme1"); 
    } 
    else if(sheet=="two"){ 
    setActiveStyleSheet("theme2"); 
    } 
    else if(sheet=="three"){ 
    setActiveStyleSheet("theme3"); 
    } 
    else{ 
    setActiveStyleSheet("default"); 
    } 
    return false 
};