从下拉菜单调用JavaScript函数 [英] Calling javascript functions from drop down

问题描述

我现在有这个HTML代码：

 主题
< ul id =dropdown> ; 
< li>选择主题
< ul> 
< li id =stylesheet1> < a href =＃>默认< / a>< / li> 
< li id =stylesheet2> < a href =＃>主题1< / a>< / li> 
< li id =stylesheet3> < a href =＃>主题2< / a>< / li> 
< li id =stylesheet4> < a href =＃>主题3< / a>< / li> 
 
< / ul> 
< / li> 
< / ul> 
  

而在另一个javascript文档中，我有这样的代码：

 函数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）; 
} 
返回false 
}; 
 
} 
 
 window.onload = initate; 
  

现在这个工作很好，但是我在上面使用了下拉菜单，我想用这个HTML代码：

 选择主题
< form> 
< select id =myList> 
< option id =stylesheet1>默认< / option> 
< option id =stylesheet2>主题1< / option> 
< option id =stylesheet3>主题2< / option> 
< option id =stylesheet4>主题3< / option> 
< / select> 
< form> 
  

和以前一样，我希望在自己的javascript文档中包含事件处理函数。我尝试将我的javascript替换为这些类型的函数：

pre $ document.getElementById（stylesheet1）。onchange = function （）{
setActiveStyleSheet（default）;
返回false
};

但它不起作用。你如何以这种方式修改调用函数？

解决方案

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

使用选项的值并处理选择的更改事件。 select的value属性获取所选选项的值，因此您可以在change函数中使用this.value。

 < form> ; 
< select id =myList> 
< option value =default>默认< / option> 
< option value =theme1>主题1< / option> 
< option value =theme2>主题2< / option> 
< option value =theme3>主题3< / option> 
< / select> 
< form> 
 
 document.getElementById（myList）。onchange = function（）{
 setActiveStyleSheet（this.value）; 
返回false 
}; 
  

I have this HTML code at the moment:

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> 

And in a separate javascript document I have this code:

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;

Now this works good but instead of the dropdown I'm using above I'd like to use this HTML code instead:

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>

As before I would like to have my event handlers in my separate javascript document. I've tried to replace my javascript into these kind of functions:

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

But it doesn't work. How do you correct call functions this way?

解决方案

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

Use values for options and handle change event for select. The value property of select gets value of the selected option, so you can use this.value in change function.

<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
};

这篇关于从下拉菜单调用JavaScript函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！