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

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

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

Используйте removeAttr ...

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

Или опора

$("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 () также работает для select http://api.jquery.com/val/

Самый простой метод

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

Я просто использовал это на самой выборке, и она сделала свое дело.

Я на jQuery 1.7.1 .

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

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

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

$("#selectID").attr('selectedIndex', '-1').find("option:selected").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

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

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

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

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

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

}); 

$("#select_id option:selected").prop("selected", false);

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

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

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

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

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

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

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

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

<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

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

Установите идентификатор на ваш выбор, например:
<select id="foo" size="2">

Тогда вы можете использовать:
$("#foo").prop("selectedIndex", 0).change();