javascriptでselectを更新すると、onchangeイベントリスナーも確実に起動するようにするにはどうすればよいですか？

Question

HTML DOMでは、要素オブジェクトに要素とのユーザー対話をシミュレートする多数のメソッドがあります。

などです。

• .click()
• .focus()
• .blur()

所与の要素は、それに取り付けられたonclickイベントリスナーがある場合：

myElement.addEventListener('click', myFunction, false); 

をそのイベントリスナーがトリガされてもよいです、 javaとスクリプト：

は

myElement.click(); 

しかし<select>に<select>で<option>、イベントリスナーがある問題の要素がされた場合にどのような方法：そのイベントリスナーが

mySelect.addEventListener('change', myFunction, false); 

をトリガすることができますか？

全例：

var boxes = document.getElementsByClassName('box'); 
 
var clickBox = boxes[0]; 
 
var hoverBoxForClickBox = boxes[1]; 
 
var hoverBoxForSelect = boxes[2]; 
 

 
var select = document.getElementsByTagName('select')[0]; 
 
var options = select.getElementsByTagName('option'); 
 

 
function updateOption() { 
 

 
    for (var i = 0; i < options.length; i++) { 
 
     if (options[i].selected === true) { 
 
      options[i].removeAttribute('selected'); 
 
     } 
 
    } 
 
    
 
    options[1].selected = true; 
 
} 
 

 
clickBox.addEventListener('click', function(){console.log('Clickbox has been clicked');}, false); 
 

 
hoverBoxForClickBox.addEventListener('mouseover', function(){clickBox.click();}, false); 
 

 
select.addEventListener('change', function(){console.log(select.value + ' has been selected');}, false); 
 

 
hoverBoxForSelect.addEventListener('mouseover', updateOption, false);

.box { 
 
display: inline-block; 
 
width: 100px; 
 
height: 100px; 
 
color: rgb(255, 255, 255); 
 
font-weight: bold; 
 
line-height: 100px; 
 
text-align: center; 
 
font-family: arial, helvetica, sans-serif; 
 
cursor: pointer; 
 
} 
 

 
.clickbox { 
 
background-color: rgb(255, 0, 0); 
 
} 
 

 
.hoverbox { 
 
background-color: rgb(0, 0, 255); 
 
} 
 

 
select { 
 
margin-right: 36px; 
 
}

<div class="box clickbox">Click Me</div> 
 
<div class="box hoverbox">Hover Me</div> 
 

 
<select> 
 
<option value="option-1">Option 1</option> 
 
<option value="option-2">Option 2</option> 
 
<option value="option-3">Option 3</option> 
 
<option value="option-4">Option 4</option> 
 
<option value="option-5">Option 5</option> 
 
</select> 
 

 
<div class="box hoverbox">Hover Me</div>

あなたは二hoverboxがホバーしたとき、<option>は常にバックオプション2に変化していることがわかりますが、することができます...イベントリスナーは起動しません。

Answer 1

名前のない関数を取り除き、古い名前の関数を使用してみませんか？

https://jsfiddle.net/4terzna8/

スニペット：

あなたが探しているかもしれないもの

function onChangeSelect(){ 
    console.log(select.value + ' has been selected'); 
} 

function updateOption() { 
for (var i = 0; i < options.length; i++) { 
    if (options[i].selected === true) { 
     options[i].removeAttribute('selected'); 
    } 
} 

options[1].selected = true; 

onChangeSelect(); 
} 
select.addEventListener('change', onChangeSelect, false);