3

私は現在この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
};

しかし、それは機能しません。この方法で呼び出し関数をどのように修正しますか？

4

2 に答える 2

6

デモ: 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
};
于 2013-01-15T00:59:15.900 に答える
4 
<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
};
于 2013-01-15T00:57:26.563 に答える