从下拉菜单中调用 javascript 函数

我现在有这个 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
};

但这不起作用。如何以这种方式更正调用函数？

Demo: http://jsfiddle.net/zYMFa/ http://jsfiddle.net/zYMFa/

使用选项值并处理选择的更改事件。 select 的 value 属性获取所选选项的值，因此您可以在更改函数中使用 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
};