CODEWITHSUNDEEP
javascripthtml
ILE
ILE

Reputation: 51

Change 'onchange' of select

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?

Upvotes: 1

Views: 31168

Answers (4)

Jack Connor
Jack Connor

Reputation: 111

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);

Upvotes: 2

RobG
RobG

Reputation: 147523

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.

Upvotes: 3

virtualsante
virtualsante

Reputation: 203

ILE, can you try this code:

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

Upvotes: 2

Munshi Azhar
Munshi Azhar

Reputation: 323

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.

Upvotes: 5

Related Questions