Indeed, the problem is related to the selected option not to the be the first one, on the first time the object is *clicked*.
The problem is not exactly the "selected" parameter written on the body, but the currently selected option in runtime. To verify that, just add an onload event to body, and set the selected option by code. The *$(document).ready* code is run and binds the event *before* the *onload * function is called to set the selection. And yet the problem occurs: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Sandbox</title> <style type="text/css" media="screen"> body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; } </style> <script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js";></script> <script type="text/javascript"> function setsecond(){ mySelect.options.item(1).selected = true; // IE only code } $(document).ready(function(){ $("#mySelect").change(function(){ alert($(this).find("option:selected").val()); }); }); </script> </head> <body onload="javascript:setsecond()"> <select id="mySelect"> <option value="1">Value 1</option> <option value="2">Value 2</option> </select> </body> </html> 2010/1/19 David Statler <statler.da...@gmail.com> > I made a quick mock up of this to try to find the problem. As you have both > stated, the problem only occurs in IE (I only tried it on IE6). However, I > rewrote the following and this works on IE6. The problem seems to occur when > you add selected="selected" to the second option value. > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> > <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> > <head> > <meta http-equiv="Content-type" content="text/html; charset=utf-8" > /> > <title>Sandbox</title> > <style type="text/css" media="screen"> > body { background-color: #000; font: 16px Helvetica, Arial; > color: #fff; } > </style> > <script type="text/javascript" src=" > http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js";></script> > <script type="text/javascript"> > $(document).ready(function(){ > $("#mySelect").change(function(){ > alert($(this).find("option:selected").val()); > }); > }); > </script> > </head> > <body> > <select id="mySelect"> > <option value="1">Value 1</option> > <option value="2">Value 2</option> > </select> > </body> > </html> > > > > > On Tue, Jan 19, 2010 at 6:06 AM, pambuk <wojtek.zymo...@gmail.com> wrote: > >> Same here, would love to hear an answer. >> >> On Jan 19, 11:00 am, Steven Yang <kenshin...@gmail.com> wrote: >> > Hi all >> > >> > I apologize if this problem has been post or report. >> > >> > I have a problem using jQuery 1.4 when i use >> > $("#mySelect").change(function(){...my logic...}) >> > >> > This problem only occurs in IE. 6-8 all have the same problem and jQuery >> > 1.3.2 does not have this problem. >> > >> > This problem occurs when I bind a "change" event on a select and when >> the >> > page is loaded the selected option is not the first one. >> > What will happen is when I click on the select and not even have a >> chance to >> > choose my option, the "change" event is fired. But after the first >> change, >> > things works normally. >> > >> > i made a simple sample here:http://jsbin.com/apufa/< >> http://jsbin.com/apufa/edit> >> > >> > you will notice when you click on the select the alert will fire, but it >> > should only be fired when i actually change the option. >> > >> > is this a bug? >> > >> > Thanks >> > >
