Kennet Leth Sørensen Kennet Leth Sørensen - 1 month ago 15
Javascript Question

onchange not working when content changed by JS

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>




Answer Source

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>