Skip to main content

Bug Tracker

Side navigation

#12002 closed bug (cantfix)

Opened July 02, 2012 07:50PM UTC

Closed October 15, 2012 04:24PM UTC

Last modified November 27, 2012 05:43PM UTC

$('<select class="question" />'); vs $('<select />', {'class': 'question'}); produces different results in IE

Reported by: Brandon Boone Owned by: saiwong
Priority: low Milestone: None
Component: attributes Version: 1.7.2
Keywords: ie6 ie7 ie8 ie9 Cc:
Blocked by: Blocking:
Description

In response to the feedback I got on this Stack Overflow question: http://stackoverflow.com/questions/11298885/select-options-text-is-different-once-selected

There may be an issue in how jQuery handles IE's quirkiness in regard to HTML object creation concerning "<select>" elements.

Using the following links:

Follow these instructions:

1. In the first drop down choose 3

2. In the second drop down choose 1

3. In the first drop down choose 1 (should not be an available option)

4. Notice that the selected value is 2!

5. Notice that changing your selected value in the second drop down also produces different values than those presented.

6. Lastly, notice that the DOM is displaying the correct values

Only thing different in these examples are the way the "select" elements are created.

//Broken
var $S1 = $('<select class="question" />'); 

//vs

//Fixed
var $S1 = $('<select />', {'class': 'question'}); 

Broken in:

  • IE 9 v9.0.8112.16421
  • IE 8 v8.0.7600.16385
Attachments (0)
Change History (18)

Changed July 02, 2012 08:43PM UTC by rwaldron comment:1

owner: → Brandon Boone
status: newpending

Can you reduce this to something that doesn't require a human to make selections in a form?

Changed July 02, 2012 08:56PM UTC by Brandon Boone comment:2

status: pendingnew

Replying to [comment:1 rwaldron]:

Can you reduce this to something that doesn't require a human to make selections in a form?

Unfortunately, programmatically altering the selection corrects the behavior

Example:

$S1.focus().children('option:eq(1)').click().prop('selected', true).end().change(); 
$S2.focus().children('option:eq(0)').click().prop('selected', true).end().change();

Changing the selections through human interaction shows that the error still persists.

Changed July 03, 2012 03:25AM UTC by Brandon Boone comment:3

Here is a fiddle to compliment the previous code snippet.

http://jsfiddle.net/s6F4h/22/

Changed July 03, 2012 04:42PM UTC by dmethvin comment:4

component: unfiledattributes
keywords: → ie6 ie7 ie8 ie9
priority: undecidedlow
status: newopen

This looks like inconsistent behavior throughout IE, from 6 to 9. The good news is that this seems to be fixed in IE10.

The page seems totally broken in IE6/7 once you make the first selection, the second box no longer even responds to clicks.

Changed August 24, 2012 01:45AM UTC by dmethvin comment:5

resolution: → invalid
status: openclosed

Don't know why I didn't notice this earlier. The markup is invalid. You can't use XHTML-style tags on elements that take content, save for the ONE EXCEPTION that jQuery allows for attribute-less tags as a shortcut. We can't save you from the other cases, you have to actually do them right. This is clearly documented. http://api.jquery.com/jQuery/#jQuery2

Wrong: $('<select class="abc" />')

Right: $('<select class="abc"></select>')

Changed August 24, 2012 02:27AM UTC by gibson042 comment:6

resolution: invalid
status: closedreopened

Changed August 24, 2012 02:50AM UTC by mikesherov comment:7

resolution: → invalid
status: reopenedclosed

Changed August 24, 2012 03:36AM UTC by dmethvin comment:8

resolution: invalid
status: closedreopened

Haha, nope gibson042 is right. I keep forgetting we fixed that for single tags. And I must have checked for that when I did the initial triage.

Changed August 24, 2012 03:43AM UTC by gibson042 comment:9

@mikesherov "select" is not in the no-content list there. Check execution on the fiddles; <select class="question" /> is converted to <select class="question" ></select> by https://github.com/jquery/jquery/blob/c01e022f33575ed45fb8da65be756fc464d40a24/src/manipulation.js#L670. I don't have access to the IEs right now, but if there's something going on here it's definitely *not* from self-closing markup.

Changed August 24, 2012 12:03PM UTC by mikesherov comment:10

status: reopenedopen

That's what I get for triaging right before bed :-/

Changed September 17, 2012 06:01PM UTC by gibson042 comment:11

keywords: ie6 ie7 ie8 ie9ie6 ie7 ie8 ie9 1.9-discuss

Changed October 14, 2012 10:30PM UTC by mikesherov comment:12

+1

Changed October 14, 2012 11:32PM UTC by rwaldron comment:13

Not sure this is vote roll material... Seems like a bug we need to just fix

Changed October 15, 2012 03:12PM UTC by gibson042 comment:14

keywords: ie6 ie7 ie8 ie9 1.9-discussie6 ie7 ie8 ie9
milestone: None1.9

Changed October 15, 2012 03:14PM UTC by gibson042 comment:15

owner: Brandon Boonesaiwong
status: openassigned

Changed October 15, 2012 04:23PM UTC by saiwong comment:16

Looks like issue is related to a browser bug IE where the DOM is correct but the view requires a repaint to reflect the changes. This can be done via a simple hide().show() as show here:

http://jsfiddle.net/saiwong/s6F4h/48/

This seems to only affect elements when the class is specified in the HTML text.

Marking as can't fix.

Replying to [ticket:12002 Brandon Boone]:

In response to the feedback I got on this Stack Overflow question: http://stackoverflow.com/questions/11298885/select-options-text-is-different-once-selected There may be an issue in how jQuery handles IE's quirkiness in regard to HTML object creation concerning "<select>" elements. Using the following links: * Broken: http://jsfiddle.net/s6F4h/16/ * Fixed: http://jsfiddle.net/s6F4h/17/ Follow these instructions: 1. In the first drop down choose 3 2. In the second drop down choose 1 3. In the first drop down choose 1 (should not be an available option) 4. Notice that the selected value is 2! 5. Notice that changing your selected value in the second drop down also produces different values than those presented. 6. Lastly, notice that the DOM is displaying the correct values Only thing different in these examples are the way the "select" elements are created.
> //Broken
> var $S1 = $('<select class="question" />'); 
> 
> //vs
> 
> //Fixed
> var $S1 = $('<select />', {'class': 'question'}); 
> 
> 
Broken in: * IE 9 v9.0.8112.16421 * IE 8 v8.0.7600.16385

Changed October 15, 2012 04:24PM UTC by gibson042 comment:17

resolution: → cantfix
status: assignedclosed

Changed November 27, 2012 05:43PM UTC by dmethvin comment:18

milestone: 1.9None