javascript - onchange not working when content changed by JS - Stack Overflow

admin管理员组

文章数量:1391929

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>

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>

• javascript
• drop-down-menu
• onchange

Share Improve this question Follow edited Sep 23, 2017 at 20:49 Kennet Leth Sørensen asked Sep 23, 2017 at 15:01 Kennet Leth SørensenKennet Leth Sørensen 1311 silver badge44 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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./a/23612498/295783

本文标签： javascriptonchange not working when content changed by JSStack Overflow