Выбор варианта текста отличается от выбранного

Проблема

Это трудно объяснить, поэтому, пожалуйста, несите меня. Сегодня я столкнулся с любопытным сценарием, который решил, но я не уверен, почему мое решение работает.

Я создал группу выборок и написал script, который сдерживает выбор одной и той же опции несколько раз, удалив выбранную опцию из других списков выбора.

Однако в IE (включая IE9) список опций отображал неправильную опцию, но после его выбора отобразится правильный параметр.

enter image description here

Восстановить ошибку

В моем первом script вы можете перейти в это состояние, выполнив следующие действия:

ПРИМЕЧАНИЕ. Это только IE. Прекрасно работает в Chrome

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

  • В первой папке выберите 3
  • Во второй папке выберите 1
  • В первом раскрывающемся списке выберите 1 (не должен быть доступным)
  • Обратите внимание, что выбранное значение равно 2!
  • Обратите внимание, что изменение выбранного вами значения во втором раскрывающемся списке также приводит к различным значениям, отличным от представленных.
  • Наконец, обратите внимание, что DOM отображает правильные значения enter image description here

Исправить ошибку (магически)

Теперь для моего исправления, которое я нашел в результате случайной работы...

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

Создание моих настроек таким образом вызывает странное поведение:

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

Создание моих выборок, как это, исправляет это поведение:

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

Follow Up

  • В чем разница между двумя объектами jQuery?
  • Как в мире IE может показать одну вещь в своей DOM, а другую на фактической странице (я знаю, что CSS content может делать это, но там нет CSS)? Не было бы так плохо, что это была всего лишь игра IE6-8, но она воспроизводима в IE9!
  • Может ли это ошибка IE или ошибка jQuery?

Наконец, возможно, я только что сделал что-то невероятно глупое, и в моей истерии придумал какой-то абсурдный вывод. Пожалуйста, мягко, сообщите мне, если я это сделал.

Ответ 1

Разница между двумя объектами DOM не является вопросом данных, а скорее вопросом порядка операций при их создании.

Когда вы используете встроенную строку $('<select class="blah" />'), элемент <select> создается с уже неповрежденным классом и соответствующим образом оформлен. Когда вы используете $(<select />, {'class': 'blah'}), вы выполняете 2 операции: 1) создаете элемент, 2) устанавливаете его классом.

Это кажется безобидным, но на самом деле заставляет браузер выполнять перерисовку элемента при применении класса CSS.

Теперь - в вашем сценарии тот факт, что это вызывает определенную проблему, является довольно явной ошибкой, которая применяется к IE, - но тот факт, что IE не должен вести себя плохо препятствует этому.

Надеюсь, что это проливает некоторый свет.

Ответ 2

Я добавил

`$("select.question").val('[what ever selection you want selected');`

чтобы он работал. Или, может быть, я неправильно понял ваш вопрос.