Bug Tracker

Ticket #12002 (closed bug: cantfix)

Opened 2 years ago

Last modified 22 months ago

$('<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:
Blocking: Blocked by:

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

Change History

comment:1 follow-up: ↓ 2 Changed 2 years ago by rwaldron

  • Owner set to Brandon Boone
  • Status changed from new to pending

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

comment:2 in reply to: ↑ 1 Changed 2 years ago by Brandon Boone

  • Status changed from pending to new

Replying to 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.

comment:3 Changed 2 years ago by Brandon Boone

Here is a fiddle to compliment the previous code snippet.

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

comment:4 Changed 2 years ago by dmethvin

  • Keywords ie6 ie7 ie8 ie9 added
  • Priority changed from undecided to low
  • Status changed from new to open
  • Component changed from unfiled to attributes

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.

comment:5 Changed 2 years ago by dmethvin

  • Status changed from open to closed
  • Resolution set to invalid

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

comment:6 Changed 2 years ago by gibson042

  • Status changed from closed to reopened
  • Resolution invalid deleted

comment:7 Changed 2 years ago by mikesherov

  • Status changed from reopened to closed
  • Resolution set to invalid

comment:8 Changed 2 years ago by dmethvin

  • Status changed from closed to reopened
  • Resolution invalid deleted

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.

comment:9 Changed 2 years ago by gibson042

@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.

comment:10 Changed 2 years ago by mikesherov

  • Status changed from reopened to open

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

comment:11 Changed 2 years ago by gibson042

  • Keywords 1.9-discuss added

comment:12 Changed 2 years ago by mikesherov

+1

comment:13 Changed 2 years ago by rwaldron

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

comment:14 Changed 2 years ago by gibson042

  • Keywords 1.9-discuss removed
  • Milestone changed from None to 1.9

comment:15 Changed 2 years ago by gibson042

  • Owner changed from Brandon Boone to saiwong
  • Status changed from open to assigned

comment:16 in reply to: ↑ description Changed 2 years ago by saiwong

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 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:

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

comment:17 Changed 2 years ago by gibson042

  • Status changed from assigned to closed
  • Resolution set to cantfix

comment:18 Changed 22 months ago by dmethvin

  • Milestone changed from 1.9 to None
Note: See TracTickets for help on using tickets.