Лучший способ отменить выбор a в jQuery?

<select size="2">
<option selected="selected">Input your option</option>
<option>Input your option</option>
</select>

каков наилучший способ, используя jQuery, элегантно отменить выбор опции?

13 ответов


использовать removeAttr...

$("option:selected").removeAttr("selected");

или Prop

$("option:selected").prop("selected", false)

здесь много ответов, но, к сожалению, все они довольно старые и поэтому полагаются на attr/removeAttr что на самом деле не так.

@coffeeyesplease правильно упоминает, что хорошим кросс-браузерным решением является использование

$("select").val([]);

еще одно хорошее кросс-браузерное решение -

// Note the use of .prop instead of .attr
$("select option").prop("selected", false);

вы можете увидеть, как он запускает самотестирование здесь. Протестировано на IE 7/8/9, FF 11, Chrome 19.


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

$("#selectID").val([]);

.val () работает и для selecthttp://api.jquery.com/val/


ответы до сих пор работают только для нескольких вариантов в IE6 / 7; для более общего выбора без нескольких вариантов вам нужно использовать:

$("#selectID").attr('selectedIndex', '-1');

это объясняется в сообщении, связанном flyfishr64. Если вы посмотрите на него, вы увидите, как есть 2 случая-multi / non-multi. Ничто не мешает вам Чан как для полного решения:

$("#selectID").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");

Самый Простой Метод

$('select').val('')

Я просто использовал это на себе и это сработало.

Я jQuery 1.7.1.


быстрый google найден этот пост это описывает, как сделать то, что вы хотите для одного и нескольких списков выбора в IE. Решение кажется довольно элегантным:

$('#clickme').click(function() {
        $('#selectmenu option').attr('selected', false);

}); 

$("#selectID option:selected").each(function(){
  $(this).removeAttr("selected");
});

это будет повторять каждый элемент и отменять выбор только тех, которые проверены


о jquery.

поскольку есть еще собственный подход javascript, я чувствую необходимость предоставить его.

var select = document.querySelector('select'); //hopefully you'll use a better selector query
select.selectedIndex = 0; // or -1, 0 sets it to first option, -1 selects no options

и просто, чтобы показать вам, насколько быстрее это: benchmark


$(option).removeAttr('selected') //replace 'option' with selected option's selector

$("option:selected").attr("selected", false);

большое спасибо за решение.

решение для одного выбора комбинированного списка работает отлично. Я нашел это после поиска на многих сайтах.

$("#selectID").attr('selectedIndex', '-1').children("option:selected").removeAttr("selected");

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

<select id="nfl">
  <option value="Bears Still...">Chicago Bears</option>
  <option selected="selected" value="Go Pack">Green Bay Packers</option>
</select>
console.log($('#nfl').val()) logs "Go Pack" to the console
Set the value to an empty string $('#nfl').val("")
console.log($('#nfl').val()) logs "" to the console

теперь это не удаляет выбранный атрибут из опции, но все, что я действительно хочу, это значение.


еще один простой способ:

$("#selectedID")[0].selectedIndex = -1