Zmiana opcji i wyzwalanie zdarzeń za pomocą JavaScript

Question

Jak mogę zmienić opcję HTML <select> za pomocą JavaScript (bez bibliotek takich jak jQuery), uruchamiając te same zdarzenia, jak gdyby użytkownik wprowadził zmianę?

Na przykład za pomocą następującego kodu, jeśli zmienię opcję za pomocą myszy, zostanie wywołane zdarzenie (tj. Zostanie uruchomione onchange). Jednak gdy zmienię opcję za pomocą JavaScriptu, to nie wywoła żadnego zdarzenia. Czy jest możliwe uruchamianie programów obsługi zdarzeń związanych z wyzwalaczem, takich jak onclick, onchange itp., Gdy wybrana jest opcja z JavaScript?

<select id="sel" onchange='alert("changed")'> 
    <option value='1'>One</option> 
    <option value='2'>Two</option> 
    <option value='3'>Three</option> 
</select> 
<input type="button" onclick='document.getElementById("sel").options[1].selected = true;' value="Change option to 2" /> 

http://jsfiddle.net/xwywvd1a/

Answer 1

Niestety, należy ręcznie uruchomić zdarzenie change. Najlepszym rozwiązaniem będzie Event Contructor.

var select = document.querySelector('#sel'), 
 
    input = document.querySelector('input[type="button"]'); 
 
select.addEventListener('change',function(){ 
 
    alert('changed'); 
 
}); 
 
input.addEventListener('click',function(){ 
 
    select.value = 2; 
 
    select.dispatchEvent(new Event('change')); 
 
});

<select id="sel" onchange='alert("changed")'> 
 
    <option value='1'>One</option> 
 
    <option value='2'>Two</option> 
 
    <option value='3' selected>Three</option> 
 
</select> 
 
<input type="button" value="Change option to 2" />

I oczywiście, konstruktor Event nie jest obsługiwana w IE. Więc może trzeba PolyFill z tym:

function Event(event, params) { 
    params = params || { bubbles: false, cancelable: false, detail: undefined }; 
    var evt = document.createEvent('CustomEvent'); 
    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); 
    return evt; 
} 

Answer 2

można ognia zdarzenie ręcznie po zmianie wybraną opcję na zdarzenie onclick robi: document.getElementById("sel").onchange();

Answer 3

Spróbuj tego:

<select id="sel"> 
<option value='1'>One</option> 
    <option value='2'>Two</option> 
    <option value='3'>Three</option> 
    </select> 


    <input type="button" value="Change option to 2" onclick="changeOpt()"/> 

    <script> 

    function changeOpt(){ 
    document.getElementById("sel").options[1].selected = true; 

alert("changed") 
    } 

    </script> 

Answer 4

Pytania te mogą być istotne o co prosisz:

• How can I trigger an onchange event manually?

• How to trigger an event in an input field changed with javascript

Oto moje myśli: Można układać się więcej niż jedno połączenie w przypadku onclick tak:

<select id="sel" onchange='alert("changed")'> 
    <option value='1'>One</option> 
    <option value='2'>Two</option> 
    <option value='3'>Three</option> 
</select> 
<input type="button" onclick='document.getElementById("sel").options[1].selected = true; alert("changed");' value="Change option to 2" /> 

Można też nazwać funkcja do tego.

Jeśli naprawdę chcesz wywołać jedną funkcję i obie zachowują się w ten sam sposób, myślę, że coś takiego powinno zadziałać. Nie jest to zgodne z najlepszą praktyką "Funkcje powinny robić jedną rzecz i robić to dobrze", ale pozwala ona wywołać jedną funkcję, aby obsłużyć oba sposoby zmiany rozwijanego menu. Zasadniczo przekazuję (wartość) w zdarzeniu onchange i (null, index of option) w zdarzeniu onclick.

Oto codepen: http://codepen.io/mmaynar1/pen/ZYJaaj

<select id="sel" onchange='doThisOnChange(this.value)'> 
<option value='1'>One</option> 
<option value='2'>Two</option> 
<option value='3'>Three</option> 
</select> 
<input type="button" onclick='doThisOnChange(null,1);' value="Change option to 2"/> 

<script> 
doThisOnChange = function(value, optionIndex) 
{ 
    if (optionIndex != null) 
    { 
     var option = document.getElementById("sel").options[optionIndex]; 
     option.selected = true; 
     value = option.value; 
    } 
    alert("Do something with the value: " + value); 
} 
</script> 

Answer 5

Fiddle mojego rozwiązania jest here. Ale na wypadek, gdy wygasa, wkleję również kod.

HTML:

<select id="sel"> 
    <option value='1'>One</option> 
    <option value='2'>Two</option> 
    <option value='3'>Three</option> 
</select> 
<input type="button" id="button" value="Change option to 2" /> 

JS:

var sel = document.getElementById('sel'), 
    button = document.getElementById('button'); 

button.addEventListener('click', function (e) { 
    sel.options[1].selected = true; 

    // firing the event properly according to StackOverflow 
    // http://stackoverflow.com/questions/2856513/how-can-i-trigger-an-onchange-event-manually 
    if ("createEvent" in document) { 
     var evt = document.createEvent("HTMLEvents"); 
     evt.initEvent("change", false, true); 
     sel.dispatchEvent(evt); 
    } 
    else { 
     sel.fireEvent("onchange"); 
    } 
}); 

sel.addEventListener('change', function (e) { 
    alert('changed'); 
}); 

Answer 6

Jest to tak proste, jak to:

var sel = document.getElementById('sel'); 
var button = document.getElementById('button'); 

button.addEventListener('click', function (e) { 
    sel.options[1].selected = true; 
    sel.onchange(); 
}); 

Ale w ten sposób ma problem. Nie możesz wywoływać wydarzeń tak jak Ty, przy normalnych funkcjach, ponieważ może istnieć więcej niż jedna funkcja nasłuchująca zdarzenia i można je ustawić na kilka różnych sposobów.

Niestety, „prawo” sposób na ogień zdarzenia nie jest takie proste, bo trzeba to zrobić w różny sposób w programie Internet Explorer (używając document.createEventObject) oraz Firefox (przy użyciu document.createEvent („HTMLEvents”))

var sel = document.getElementById('sel'); 
var button = document.getElementById('button'); 

button.addEventListener('click', function (e) { 
    sel.options[1].selected = true; 
    fireEvent(sel,'change'); 

}); 


function fireEvent(element,event){ 
    if (document.createEventObject){ 
    // dispatch for IE 
    var evt = document.createEventObject(); 
    return element.fireEvent('on'+event,evt) 
    } 
    else{ 
    // dispatch for firefox + others 
    var evt = document.createEvent("HTMLEvents"); 
    evt.initEvent(event, true, true); // event type,bubbling,cancelable 
    return !element.dispatchEvent(evt); 
    } 
} 

Answer 7

Cały tworzenie i wydarzenia wysyłkowe działa, ale skoro używasz atrybut onchange, twoje życie może być nieco prostsze:

http://jsfiddle.net/xwywvd1a/3/

var selEl = document.getElementById("sel"); 
selEl.options[1].selected = true; 
selEl.onchange(); 

Jeśli korzystasz z interfejsu API zdarzeń przeglądarki (addEventListener, IE AttachEvent itd.), Będziesz musiał tworzyć i wysyłać zdarzenia, o czym inni już wcześniej wspomnieli.