当 JS 更改内容时 onchange 不起作用

Question

我制作了一个脚本，select是下拉菜单中的一个选项。脚本正在运行，但下拉菜单也有一个 onchange 侦听器，当下拉选项 select 使用 JS?

编辑时，此侦听器不会触发

示例：

如果我从下拉列表中手动选择 T405，onchange 脚本会触发。如果我从下拉菜单中创建脚本 select T405，下拉菜单会显示 selected 选项，但 onchange 脚本不会触发？

我的简单html代码（稍后会是img）：

<ul>
  <li onclick="selectItemByValue('bundle-option-132', 700)">Test</li>
</ul>

我的 JS（正在工作并且 select 从下拉列表中选择一个选项）：

<script>
   function selectItemByValue(dropValg, value) {
      var denne = document.getElementById(dropValg);
      denne.value = value;
   }
</script>

有什么方法可以 "update/refresh" 下拉菜单，以便在我的脚本选择某个选项时触发 onchange 脚本？

我什至试过从我自己的脚本中触发 onchange 脚本？

<script>
   function selectItemByValue(dropValg, value) {
      var denne = document.getElementById(dropValg);
      denne.value = value;

      bundle.changeSelection(denne);
   }
</script>

----------------编辑----------------

它现在可以在我的脚本中添加 denne.onchange() 和运行作为 "snippet"，但它不适用于我的 "Live site"?

似乎有一个事件侦听器覆盖了内联 onchange 调用？一个名为 prototype.js 的脚本？如果我删除 <select> 元素的 onchange 部分，这个脚本无论如何都会运行 it/adds。

我在我的 Magento 商店中使用了一个名为 OptionBundle 的脚本，当使用 JS 更改下拉选项时，这个脚本不会被触发？如果我删除 prototype.js 我的脚本可以完美运行，但它会破坏 OptionBundle 脚本的功能。

我会尝试写剧本的作者。

工作示例（添加了 denne.onchange()）：

function selectItemByValue(dropValg, value) {
  var denne = document.getElementById(dropValg);
  denne.value = value;
  denne.onchange();
  console.log(denne.value);
  console.log(denne);
}

<ul>
  <li onclick="selectItemByValue('bundle-option-132', 700)"> Click to change</li>
</ul>

<select onchange="alert('Content changed')" id="bundle-option-132" name="bundle_option[132]" class="bundle-option-132 bundle-option-select change-container-classname" wtx-context="276DE744-A364-4DD3-AEFC-0D9F9A9AAE19">
  <option value="">Udvælg...</option>
     <option value="875">Bianco</option>
     <option value="695">T400</option>
     <option value="697">T402</option>
     <option value="698">T403</option>
     <option value="699">T404</option>
     <option value="700">T405</option>
     <option value="702">T407</option>
     <option value="703">T408</option>
     <option value="704">T409</option>
     <option value="705">T410</option>
</select>

Answer 1

只需触发onchange

function selectItemByValue(dropValg, value) {
  var denne = document.getElementById(dropValg);
  denne.value = value;
  denne.onchange();
}
window.onload = function() {
  document.getElementById("sel").onchange = function() {
    console.log(this.value);
  }
  document.getElementById("but").onclick = function() {
    selectItemByValue("sel", 1);
  }
}

<select id="sel">
  <option value="">Please select</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select> <button id="but" value="1">
Click to change to "1"</button>

更新版本，尝试

当 JS 更改内容时 onchange 不起作用

onchange not working when content changed by JS

javascript

onchange

drop-down-menu