Разница между find ('option[selected]') и find ('option').фильтр ('[выбрано]')

сценарий:

я получил 2 выражения jQuery:

/* A */ $('select').find('option[selected]');
/* B */ $('select').find('option').filter('[selected]');

что значит (предположим, что есть только один select в документе, для простоты):

  • A: получить select, тогда найдите все option потомки, которые имеют атрибут с именем selected.
  • B: получить select, тогда найдите все option потомки, затем фильтровать по тем, кто имеет атрибут с именем selected.

Ожидаемое Поведение:

A и B должно дать тот же результат.

Поведение:

после того, как пользователь изменил выбор в раскрывающемся списке

  • A возвращает по умолчанию избранные option.
  • B возвращает новая выбранные option.

вопрос:

так почему же они разные? Мое понимание селекторов CSS неверно?

Live Demo:

Live demo это здесь здесь.

Исходный Код:

HTML-код:

<select>
 <option value='p'>p</option> 
 <option value='q' selected>q</option>
 <option value='r'>r</option> 
 <option value='s'>s</option> 
</select>


<input type='button' value='click me!'/> <br/> 
 ResultA : <span id='ResultA'>
    here
</span> <br/> 
 ResultB : <span id='ResultB'>
    here
</span> <br/>

Javascript:

function SetResult(ResultObj, ElementObj) {
    ResultObj.text("length=" + ElementObj.length + " " + "val()=" + ElementObj.val());
}

$(function() {
    $('input[type=button]').click(function() {
        var SelectObj = $('select');
        SetResult($("#ResultA"), SelectObj.find('option[selected]'));
        SetResult($("#ResultB"), SelectObj.find('option').filter('[selected]'));
    });
});
9
html-select jquery jquery-selectors

5 ответов

шипящий двигатель проверяет selected свойства элемента (который содержит настоящее значение), а не атрибут который содержит исходное (по умолчанию) значение.

см.https://github.com/jquery/sizzle/blob/master/sizzle.js#L788

чего я еще не понял, так это почему ваш второй селектор, по-видимому, вызывает шипение, но первый, похоже, нет.

В любом случае, свойство-это то, что вы должны проверять, а не атрибут, поэтому вы должны использовать :selected псевдо-селектор, а не [selected]

3

когда вы пишите option[selected] он будет искать selected атрибут/свойство вместо этого вы должны использовать option:selected если у вас есть readonly собственность и Вы код option[readonly] вернет s

$('[attribute]') будет выбирать элементы, имеющие указанный атрибут, с любым значением.
дополнительная информация : имеет селектор атрибутов [name]

Скрипка

<select>
 <option value='p'>p</option> 
 <option value='q' selected>q</option>
 <option value='r'>r</option> 
 <option value='s' readonly>s</option> 
</select>
1

что должны возвращать выражения?

[selected] соответствует всем элементам, которые имеют selected атрибут, с любым значением (ссылки:W3C по, jQuery).

почему результаты противоречивы?

я отправил отчет об ошибке в jQuery здесь. Он помечен как дубликат еще один отчет об ошибке что это исправлено.

любой решения?

для получения нынешний выбор:

использовать :selected селектор (live demo здесь):

$('select').find('option').filter(':selected'); /* Supposedly faster */
or
$('select').find('option:selected');            /* Supposedly slower */

обратите внимание, что 2-е выражение предположительно медленнее, согласно doc.

, потому что :selected является расширением jQuery, а не частью спецификации CSS, запросы с использованием :selected не удается воспользоваться повышением производительности предоставлено родным DOM querySelectorAll() метод.

для получения выбор по умолчанию:

на jQuery 1.9+, используйте любое из выражений, как в вопросе, т. е.

/* A */ $('select').find('option[selected]');
/* B */ $('select').find('option').filter('[selected]');

на jQuery 1.6+ использовать defaultSelected недвижимость (live demo здесь ссылки: w3schools, Mozilla, в MSDN, MSDN):

$('select').find('option').filter(function() {
    return $(this).prop('defaultSelected');
});
1

Это зависит от того, как дом построен браузером.. используя option[selected] jQuery поиск элемента опции, имеющего выбранный атрибут, который в некоторых случаях не применяется

вы должны использовать

SelectObj.children(':selected')
0

ваша реализация неверна, это не

find('option[selected]')

следует,

SelectObj.find('option:selected')

вот отредактированная скрипка:

http://jsfiddle.net/ugXtx/6/

и ссылка:

http://api.jquery.com/selected-selector/

0