Search code examples
javascriptjqueryhtmlinternet-explorer

Select option's text is different once selected

Problem

This is hard to explain, so please bear with me. I came across a curious scenario today that I solved, but I'm not sure why my solution works.

I created a group of selects and wrote a script that constrains you from selecting the same option more than once by removing the selected option from the other select lists.

However in IE(including IE9), the option list was displaying the wrong option, but once selected it would display the right option.

enter image description here

Re-create the error

In my first script you can get to this state by doing the following:

NOTE: This is IE only. Works fine in Chrome

Script: http://jsfiddle.net/s6F4h/37/

  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 enter image description here

Fix the error (magically)

Now for my fix which I found by random guess work...

Script: http://jsfiddle.net/s6F4h/36/

Creating my selects like this causes the strange behavior:

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

Creating my selects like this corrects that behavior:

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

Follow Up

  • What is the difference in the above two jQuery objects?
  • How in the world can IE show one thing in its DOM and another on the actual page (I know CSS content can do this, but there's no CSS involved)? Wouldn't be so bad if this was just an IE6-8 thing, but it's reproducible in IE9!
  • Could it be an IE bug or a jQuery bug?

Lastly, maybe I've just done something incredibly stupid, and in my hysteria have concocted some absurd conclusion. Please, gently, inform me if I have done so.

Solution

  • The difference between the two DOM objects is not a matter of data, but rather a matter of the order of operations when they are created.

    When you use the inline of $('<select class="blah" />'), the <select> element is created with the class already intact, and styled accordingly. When you use $(<select />, { 'class': 'blah' })`, you perform 2 operations: 1) create the item, 2) set it's class.

    This seems innocuous, but it actually forces the browser to do a redraw of the element upon application of the CSS class.

    Now - in your scenario, the fact that this causes the specific issue that it does is pretty clearly a bug that applies to IE - but the fact that IE shouldn't behave poorly obviously in no way prevents it from doing so.

    Hope this sheds some light.