web-dev-qa-db-ja.com

<select>のオプションを変更し、JavaScriptでイベントをトリガーします

HTMLを変更するにはどうすればよいですか<select>のオプション（JavaScriptを使用（jQueryなどのライブラリなし）、ユーザーが変更を加えた場合と同じイベントをトリガーしますか？

たとえば、次のコードを使用して、マウスでオプションを変更すると、イベントがトリガーされます（つまり、onchangeが実行されます）。ただし、JavaScriptを使用してオプションを変更すると、イベントは発生しません。 JavaScriptでオプションが選択されたときに、onclick、onchangeなどのようなトリガー関連イベントハンドラーを起動することは可能ですか？

<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/

javascripthtmldomhtml-selectdom-events
29
user1798933

残念ながら、changeイベントを手動で起動する必要があります。そして、 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" />

そしてもちろん、イベントコンストラクターはIEではサポートされていません。したがって、これをポリフィルする必要があるかもしれません：

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

私の解決策のフィドルは here です。ただし、万が一失効した場合に備えて、コードも貼り付けます。

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');
});
11
Karol

これは次のように簡単です。

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

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

しかし、この方法には問題があります。通常の関数では、イベントをリッスンすることはできません。イベントをリッスンする関数が複数ある場合があり、それらはいくつかの異なる方法で設定できるためです。

残念ながら、Internet Explorer（document.createEventObjectを使用）とFirefox（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);
    }
}
6
galeonweb

イベントの作成とディスパッチはすべて機能しますが、onchange属性を使用しているため、あなたの人生は少し簡単になります。

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

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

ブラウザのイベントAPI（addEventListener、IEのAttachEventなど）を使用する場合、他の人が既に指摘しているように、イベントを作成してディスパッチする必要があります。

2
Ryan Wheale

これを試して：

<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>
1
Vicky Gonsalves

これらの質問は、あなたが求めているものに関連する場合があります。

私の考えは次のとおりです。次のように、onclickイベントで複数の呼び出しを積み重ねることができます。

<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" />

これを行う関数を呼び出すこともできます。

1つの関数を呼び出して、両方を同じように動作させたい場合は、このようなものが機能するはずです。 「関数は1つのことを実行して適切に実行する必要があります」というベストプラクティスに従っていませんが、ドロップダウンを変更する両方の方法を処理するために1つの関数を呼び出すことができます。基本的に、onchangeイベントでは（値）を、onclickイベントでは（null、オプションのインデックス）を渡します。

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>
1
mmaynar1

Onclickイベントの実行時に選択されたオプションを変更した後、手動でイベントを起動できます：document.getElementById("sel").onchange();

0
eldano

Razorを使用したHTML：

 @Html.DropDownList("test1", Model.SelectOptionList, new { id = "test1", onchange = "myFunction()" })

JSコード：

function myFunction() {

            var value = document.getElementById('test1').value;

            console.log("it has been changed! to " + value );
        }
0
Primoshenko