jQuery (formElement) .val (null): противоречивые результаты в разных браузерах

Question

Код здесь:

http://jsfiddle.net/jf7t2/1/

Пожалуйста, запустите его на последних версиях всех браузеров, и убедитесь сами. Когда кнопка нажата, на:

1. в Chrome (и, конечно, в Safari) он просто ничего не выбирает, вместо этого создает призрачную пустую опцию
2. в Firefox и Opera, работает так, как я ожидаю и хочу, чтобы все работало, отменяет выбор всех опций
3. в Internet Explorer ничего не делает

Итак, какое поведение ожидается?

Answer 1

Если вы посмотрите на строку исходного кода jQuery 1.5.1 1970, вы увидите следующее:

// Treat null/undefined as ""; convert numbers to string
if ( val == null ) {
    val = "";

Таким образом, ожидаемое поведение такое же, как если бы вы дали пустую строку в качестве аргумента.

Если вы продолжите линию 1984, вы увидите это:

} else if ( jQuery.nodeName( this, "select" ) ) {
  var values = jQuery.makeArray(val);

  jQuery( "option", this ).each(function() {
    this.selected = jQuery.inArray( jQuery(this).val(), values ) >= 0;
  });
  if ( !values.length ) {
   this.selectedIndex = -1;
  }

Итак, ожидаемое поведение:

1. , если есть option с пустымстроковое значение, выберите это.
2. если не задано selectedIndex = -1

С этого момента браузер должен определить, что делать, если для selectedIndex установлено значение -1

Глядя на библиотеку msdn , она говорит:

Свойство selectedIndex возвращает -1, если объект select не содержит выбранных элементов.Установка свойства selectedIndex удаляет все существующие выбранные элементы.

Таким образом, в ожидаемом поведении, по-видимому, происходит отмена выбора всех параметров

То же самое относится к Документация MDC и, следовательно, firefox, где они очень явно об этом говорят

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

Похоже, что браузеры на основе WebKit по-разному относятся к вещам.

Если вы воспользуетесь Google "WebKit selectedIndex", выпосмотрите довольно много сообщений об ошибках, связанных с тегом select, так что, может быть, это просто фанк;)

Если подумать, это ошибка в jQuery, поскольку это библиотека, которая должна иметь возможность вести себя одинаковобраузеры - надо сообщать;)

Answer 2

Какое поведение ожидается?

Функция jQuery val() задокументирована для получения строкового значения или массива строковых значений, поэтому не существует определенного поведения.

Попробуйте val([]), чтобы ничего не выбирать или восстановить исходное значение, используя свойство defaultSelected:

$('#select option').each(function() {
    this.selected= this.defaultSelected;
});

Answer 3

Я раздвоил ваш jsfiddle с одним, который, как мне кажется, может вам помочь: http://jsfiddle.net/marcosfromero/AYLrT/

Я протестировал его в IE, Firefox и Chrome

jQuery("#button").click(function(event){
    var select = jQuery("#select");
    // Button click will try to find a "none" option (with no value)
    if(select.find('option.none').length===0) {
        // If it's not found, it creates the option
        select.prepend('<option value="" class="none"></option>');   
    }
    // And then it selects it
    select.val('');
});

// When select value is changed...
jQuery('#select').change(function() {
    var me = $(this);
    // ... to something different than empty ("")...
    if(me.val() !== '') {
        //... it removes that option
        me.find('option.none').remove();   
    }
});

Answer 4

Ни одно из этих поведений не является необоснованным.В Chrome это имеет смысл, потому что вы устанавливаете значение в ничто, поэтому оно ничего не отображает.В IE это имеет смысл, потому что вы не меняете действительное значение, поэтому оно ничего не меняет.

Если вы хотите, чтобы все браузеры вели себя как Firefox, просто установите значение 1.