Onclick in select not working in IE

Question

Am a bit new to javascript. This question might sound a bit too silly, but I'm not able to figure it out why the following doesn't work in IE and works in firefox..

<select multiple="multiple">
 <option value="tx" onClick="alert('tx');">Texas</option>
 <option value="ak" onClick="alert('ak');">Alaska</option>
 <option value="ca" onClick="alert('ca');">California</option>
 <option value="ws" onClick="alert('ws');">Washington</option>
 <option value="tn" onClick="alert('tn');">Tennessee</option>
</select>

The alert doesn't come up in IE (I'm using IE8). But it works in firefox!!!!!

possible duplicate of Assign click() to a child control in jquery — Fermin
– Fermin, Commented Oct 21, 2010 at 15:10
I'm sorry I put up the wrong heading in question. Its a simple html select element and javascript to invoke click event which does not work in ie — chuckyCheese
– chuckyCheese, Commented Oct 21, 2010 at 15:15

Mark · Accepted Answer · 2010-10-21 15:38:54Z

6

According to w3schools, the option tag does support an onclick attribute. I tried with with bottom of the barrel IE6 and this doesn't seem to be the case.

The simplest way to do this would be:

<select multiple="multiple" onchange="alert(this.value);">
 <option value="tx">Texas</option>
 <option value="ak">Alaska</option>
 <option value="ca">California</option>
 <option value="ws">Washington</option>
 <option value="tn">Tennessee</option>
</select>

This is not exactly what you are after, but should be pretty close.

EDITS

It would just take more work:

<select multiple="multiple" onchange="
    switch (this.value){
      case 'tx': funcOne(); break;
      case 'ak': funcTwo(); break;
      etc...
   }
 ">
 <option value="tx">Texas</option>
 <option value="ak">Alaska</option>
 <option value="ca">California</option>
 <option value="ws">Washington</option>
 <option value="tn">Tennessee</option>
</select>

At this point it would be appropriate to wrap the onchange into a function in a js file instead of embedding it in the html.

edited Oct 21, 2010 at 15:38

answered Oct 21, 2010 at 15:22

Mark

109k20 gold badges180 silver badges238 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

chuckyCheese Over a year ago

Thanks Mark, that looks better. But what if I need to assign different functions for different options? I cant make this work right?

chuckyCheese Over a year ago

Thanks a lot Mark. That should do it I guess

Robusto · Accepted Answer · 2010-10-21 15:21:14Z

6

I would use the onchange event:

<select multiple="multiple" onchange="alert(this.options[this.selectedIndex].value)">
 <option value="tx">Texas</option>
 <option value="ak">Alaska</option>
 <option value="ca">California</option>
 <option value="ws">Washington</option>
 <option value="tn">Tennessee</option>
</select>

Although Daniel Mendel's solution is perfectly valid.

answered Oct 21, 2010 at 15:21

Robusto

32k8 gold badges59 silver badges79 bronze badges

4 Comments

chuckyCheese Over a year ago

Its great when I have a single function to be called. But what if I need to assign different functions for different options?

Robusto Over a year ago

That's what the selectedIndex will tell you. You can get the actual option element from that and do something different with it within the same function. That is a feature, not a drawback. For simplicity (and following your lead) I put the entire handler in the event listener attribute, but really you would simply pass "this" to an external function. Or use jQuery and assign it a function literal.

Ruan Mendes Over a year ago

change does not fire until the select loses focus, some browsers do fire it as you select with up/down arrows

Robusto Over a year ago

@Juan Mendes: The example I gave fires on all flavors of change, including click and up/down arrows, etc.

Daniel Mendel · Accepted Answer · 2010-10-21 15:16:10Z

2

This is because IE doesn't register a click event when you select a new option in a select field (guessing). Instead, you should use the onBlur event (and put the code into your javascript instead) like so (assuming jQuery):

<script type='text/javascript'>
  $(document).ready(function(){
    $('select#state').bind('blur', function(){
      alert(this.val());
    });
  });
</script>

<select id='state' multiple="multiple">
  <option value="tx">Texas</option>
  <option value="ak">Alaska</option>
  <option value="ca">California</option>
  <option value="ws">Washington</option>
  <option value="tn">Tennessee</option>
</select>

answered Oct 21, 2010 at 15:16

Daniel Mendel

10k1 gold badge27 silver badges37 bronze badges

2 Comments

chuckyCheese Over a year ago

I'm sorry I entered the question wrong. I dont have any jquery at all. COnsidering simple javascript and html select.. Is there a way to make it work in IE?

Daniel Mendel Over a year ago

Understood, the answer by Robusto is the most direct, valid, straight javascript solution for the code you posted.

Collectives™ on Stack Overflow

Onclick in select not working in IE

3 Answers 3

2 Comments

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related