So erfassen Sie Ereignisse auf dynamisch geändert wählt

Question

Ich habe ein Skript, das eine span erstellt, um eine select Tag zu vermuten, und blendet dann die select. Dies ermöglicht ein einfacheres CSS-Styling, da ich die span einfacher formatieren kann, im Vergleich zu einem unverwüstlichen select Tag. Mit der Spanne, habe ich eine Dropdown-Liste, die ul Tag ist, das Problem ist, wenn ich einen Wert auf die "Fake-Select" wählen und Javascript verwenden, um den Wert von versteckten "echten" wählen, wird die onchange nicht ausgelöst. Der Zweck ist, ‚none-Techies‘, die gestylten wählt wollen zu helfen, und ich möchte daher alle Ereignisse erfassen sie an die Auswahl wie onchange hinzugefügt haben, onfocus und onreset

Im folgenden Code für Beispiel: wenn Sie die Option manuell auswählen, das onchange Ereignis wird ausgelöst, während die timeout Funktion nicht das Ereignis auslöst

<script> 
     var select = document.getElementsByTagName('select')[0]; 

     function changed() { 
      var select = document.getElementsByTagName('select')[0]; 
      select.value = 'that is optionification fam!'; 
     } 

     setTimeout(changed, 1000); 
    </script> 
    <select onchange="alert('Object has changed!')"> 
     <option value="">Select an Option</option> 
     <option>this is option</option> 
     <option>that is optionification fam!</option> 
     <option>these are options</option> 
     <option>those a options</option> 
     <option>I like options</option> 
     <option>I don't like options</option> 
     <option>this is an option</option> 
    </select> 

UPDATE:

Von W3C:

Ereignisse, die vom User-Agenten generiert werden, entweder als Ergebnis der Interaktion mit dem Benutzer oder als direkte Folge von Änderungen an den DOM, durch die User-Agenten mit Privilegien vertraut sind, den Ereignisse, die nicht gewährt werden Wird vom Skript über die DocumentEvent.createEvent-Methode ("Event") generiert, mithilfe der Event.initEvent() -Methode geändert oder über die EventTarget.dispatchEvent() -Methode ausgelöst. Das Attribut "isTrusted" für vertrauenswürdige Ereignisse hat den Wert "true", während nicht vertrauenswürdige Ereignisse den Wert "isTrusted" für "false" aufweisen.

Die meisten nicht vertrauenswürdigen Ereignisse sollten keine Standardaktionen auslösen, mit Ausnahme von Click- oder DOMActivate-Ereignissen. Diese Ereignisse lösen die Standardaktion eines Aktivierungsauslösers aus (weitere Informationen finden Sie unter Aktivierungsauslöser und -verhalten). Diese nicht vertrauenswürdigen Ereignisse haben den Attributwert isTrusted von false, initiieren jedoch weiterhin Standardaktionen für die Abwärtskompatibilität. Alle anderen nicht vertrauenswürdigen Ereignisse müssen sich so verhalten, als wäre die Event.preventDefault() -Methode für dieses Ereignis aufgerufen worden.

Da isTrusted ist ein lesbarer nur als auch Attribut, alle Skript Änderungen sind ‚Set-in-Stein nicht vertrauten‘ ... und damit das Problem!

Kann denkt jemand eine Arbeit um, wo kann ich

• erstellen „fake“/künstliche Ereignis-Antworten
• Oder die Wert der Auswahl ändern Eingabe mit Benutzer **

Answer 1

Hinweis , zuerst <script> Block select ist nicht definiert. Verwenden Sie load Ereignis von window, um select Element zu definieren. Eine Abhilfe wäre Document.createEvent() mit "MouseEvents" als Parameter zu verwenden, MouseEvent.initMouseEvent() ( veraltete) mit "change" als ersten Parameter, true, true, window als nächste drei Parameter, EventTarget.dispatchEvent() zu select variable verketteten definiert innerhalb windowload Ereignisses change Ereignis <select> zu versenden Element.

Siehe auch Trigger click on input=file on asynchronous ajax done().

<script> 
 
    function changed() { 
 
    var select = document.getElementsByTagName("select")[0]; 
 
    select.value = "that is optionification fam!"; 
 
    alert("Object has changed!"); 
 
    } 
 

 
    window.onload = function() { 
 
    let evt = document.createEvent("MouseEvents"); 
 
    const select = document.getElementsByTagName("select")[0]; 
 
    evt.initMouseEvent("change", true, true, window); 
 
    setTimeout(function() { 
 
     select.dispatchEvent(evt); 
 
    }, 3000); 
 
    } 
 
</script> 
 
<select onchange="changed()"> 
 
    <option value="">Select an Option</option> 
 
    <option>this is option</option> 
 
    <option>that is optionification fam!</option> 
 
    <option>these are options</option> 
 
    <option>those a options</option> 
 
    <option>I like options</option> 
 
    <option>I don't like options</option> 
 
    <option>this is an option</option> 
 
</select>

CustomEvent an Chrom unterstützt wird, firefox 6+, ie9 +, oper 11+, Groß 5.1+ (533,3); EventTarget.dispatchEvent().

<script> 
 
    function changed() { 
 
    var select = document.getElementsByTagName("select")[0]; 
 
    select.value = "that is optionification fam!"; 
 
    alert("Object has changed!"); 
 
    } 
 

 
    window.onload = function() { 
 
    let evt = new CustomEvent("change"); 
 
    const select = document.getElementsByTagName("select")[0]; 
 
    setTimeout(function() { 
 
     select.dispatchEvent(evt); 
 
    }, 3000); 
 
    } 
 
</script> 
 
<select onchange="changed()"> 
 
    <option value="">Select an Option</option> 
 
    <option>this is option</option> 
 
    <option>that is optionification fam!</option> 
 
    <option>these are options</option> 
 
    <option>those a options</option> 
 
    <option>I like options</option> 
 
    <option>I don't like options</option> 
 
    <option>this is an option</option> 
 
</select>