onchange not working when content changed by JS

Question

I made a script that selects an option from a dropdown menu. The scrips is working but the dropdown menu also have an onchange listener, and this listener doesn't fire when the dropdown option is selected with JS?

Example:

If I choose T405 from the dropdown manually the onchange script fires. If I make the my script select T405 from the dropdown the dropdown shows the selected option, but the onchange script doesn't fire?

My simple html code (it's gonna be an img later):

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

My JS (which is working and selecting an option from the dropdown):

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

Is there any way to "update/refresh" the dropdown so that the onchange script will fire when an option is chosen by my script?

I've even tried firing the onchange script from within my own script?

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

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

----------------- EDIT ----------------

It now works when adding denne.onchange() to my script and running this as a "snippet", but it doesn't work on my "Live site"?

It seems that there's an event listener that's overriding the inline onchange call? A script called prototype.js? If I delete the onchange part of the <select> element this script just runs it/adds it anyway.

I'm using a script in my Magento Shop that's called OptionBundle and it's this script that isn't triggered when a change the dropdown option with JS? If I delete prototype.js my script works perfectly, but it of coarse breaks the functionality of the OptionBundle script.

I'm gonna try writing the author of the script.

Working example (with added 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>

mplungjan · Accepted Answer · 2021-01-31T13:08:46.733

4

Just trigger the 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>

Fo a newer version, try https://stackoverflow.com/a/23612498/295783

edited Jan 31 '21 at 13:08

answered Sep 23 '17 at 15:23

mplungjan

169,008
28
173
236

Thanks. Adding `denne.onchange()` solved the problem when running it as a code snippet (sandbox). But sadly it doesn't work on my site as there's another script (event listener) that's overriding the `onchange()`? Added more about this to my original post. – Kennet Leth Sørensen Sep 23 '17 at 20:53

onchange not working when content changed by JS

1 Answers1