Change 'onchange' of select

Question

I have a selectbox with an onchange:

<select id="select" onchange="eventA();">

I'd like to change the "onchange" to something else, for example to eventB();.

I've tried this, based on this post: How to add an onchange event to a select box via javascript?

document.getElementById("select").onchange="eventB()";

However, nothing happens, the onchange does not change.

Any ideas?

`document.getElementById("select").onchange = eventB;` assuming `eventB` is a function. — Andrew Li, Oct 06 '16 at 03:26

Munshi Azhar · Answer 1 · 2016-10-06T04:00:33.767

Hi You should try out this code.

<html>
  <head>
  <title> Script </title>
  <script type='text/javascript'>
    function changeFirst(){
      alert('I am first');
    }
    
    function changeSecond(){
      alert('I am second');
    }
    
    function changer(){
      document.getElementById('selectinput').attributes.onchange.nodeValue = "changeSecond()";
    }
  </script>
  </head>
  <body onload="changer()">
    <select id="selectinput" onchange="changeFirst()">
      <option value="1"> One </option>
      <option value="2"> two </option>
      <option value="3"> three </option>
      <option value="4"> four </option>
      <option value="5"> five </option>
    </select>
  </body>
</html>

It's little bit easy to use jquery instead of pure javascript. But with javascript you can't directory change any attributes like value or innerHTML. document.getElementById('ELEMENT_ID') will return html tag not an object. you can change value using document.getElementById('ELEMENT_ID').value = 'your_value' but change any event attribute is not done like this. document.getElementById('ELEMENT_ID').attribute will return all the used attribute of element and you can change it's value using nodeValue as I show you in example.

One more clarification according to your need that if you write this code in your select box change event than every time your first event was called for e.g. if I write changer() function code into changeFirst() function than change event of selectbox will fire changeFirst() at firsttime and from the next time the changeSecond() event will fire. So I suggest you to use jquery change event instead of using pure javascript to prevent this type of confusion.

It's just an example. you can also change it any where as you want. — Munshi Azhar, Oct 06 '16 at 03:48
The statement "*But with javascript you can't directory change any attributes like value or innerHTML*" is incorrect. Attribute values can be changed and *innerHTML* isn't an attribute, it's a DOM property. Also the statement "*document.getElementById('ELEMENT_ID') will return html tag not an object*" is plain wrong, it returns a DOM object or *null*. — RobG, Oct 06 '16 at 04:59

score 3 · Answer 2 · answered Oct 06 '16 at 04:50

The answer is in a comment. For your code:

document.getElementById("select").onchange="eventB()";

you should not set the property to a string, you should assign a function reference, so:

document.getElementById("select").onchange = eventB;

Assigning a string may work in some browsers but all browsers support assigning a function.

You might find the MDN onchange article helpful, it also has links to relevant standards.

virtualsante · Accepted Answer · 2016-10-06T04:06:37.463

2

ILE, can you try this code:

document.getElementById('select').setAttribute('onchange','eventB();');

edited Oct 06 '16 at 04:06

answered Oct 06 '16 at 03:56

virtualsante

203
1
10

score 2 · Answer 4 · answered Oct 06 '16 at 06:14

I would go with a classic vanilla javascript event listener for your class. Like:

var select = document.getElementById("select");
select.addEventListener("change", function(){
    eventB();
});

or alternatively:

var select = document.getElementById("select");
select.addEventListener("change", eventB);

Change 'onchange' of select

4 Answers4