Aufruf von javascript-Funktionen aus der drop-down -

Habe ich diesen HTML-code im 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>

Und in einer separaten javascript-Dokument habe ich diesen 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;

Nun, dies funktioniert gut, aber statt der dropdown-ich bin mit den oben ich möchte in diesem HTML-code anstatt:

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>

Wie vor würde ich gerne meine event-Handler in meiner separaten javascript-Dokument. Ich habe versucht, Sie zu ersetzen meinen javascript-Code in diese Art von Funktionen:

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

Aber es funktioniert nicht. Wie Sie die richtigen Funktionen aufrufen, die sich auf diese Weise?

Siehe diese Antwort: stackoverflow.com/a/5024082/754519
Wie gesagt ich würde gerne, um meine event-Handler in einer separaten javascript-Dokument.

InformationsquelleAutor Benji | 2013-01-15

  1. 6

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

    Verwenden Sie die Werte für Optionen und Griff change-Ereignis für das wählen Sie. Die value-Eigenschaft des select wird der Wert der ausgewählten option, so können Sie diesen verwenden.Wert in der Funktion ändern.

    <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
};
    Oh, schön, +1 für die Verwendung der value
    Dies scheint zu sein, genau das, was ich will, aber es funktioniert nicht mit dem rest von meinem code die style-sheet ändern. Könnten Sie mir helfen, es zu lösen, wenn ich ein update für meine Frage?
    Ja, wir brauchen tatsächliche code oder echte demo, um Ihnen zu helfen.
    Das onchange-Funktion ist sauberer als die gewählte Lösung, nicht zuletzt, weil es ermöglicht die Zugabe von extra-Optionen, ohne änderungen am code.
    Dies funktionierte bei mir nicht vor, obwohl es schien zu funktionieren wie es sollte, aber jetzt habe ich es erneut versucht und es funktioniert, so bin ich einverstanden, das ist ein ordentlicher Lösung. Also ja, das ist mein problem gelöst, wie gut und wie du Sie erwähnt hast @Nick auch besser, seit ich nicht ändern mein code hinzufügen, um weitere Optionen anzuzeigen.

    InformationsquelleAutor antejan

  2. 3
    <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
};
    Dies ist das eine: Sie können nicht nur-Handler auf die option Elemente, nur die Eltern select - dann haben Sie, um herauszufinden, was ausgewählt ist. Wenn ich mich Recht erinnere, aber Sie sollten in der Lage sein zu verwenden this statt document.getElement...
    Das funktioniert nicht mit dem rest von meinem code. Es scheint, dass es nur Sprünge zu option drei, egal was.
    Ich hatte verpasst eine == im three vergleichen...Befestigung versuchen, und sehen, ob es Veränderungen. Auch, vielleicht alert (oder in der Konsole.log) sheet in dieser Funktion und sehen, ob es richtig definiert
    Dass es perfekt gelöst! Vielen, vielen Dank!
    Entschuldigung, dass mein Kommentar (oben) führte zu der Lösung wird de-aktiviert werden. Das war nicht meine Absicht 🙂

    InformationsquelleAutor Robot Woods

Schreibe einen Kommentar