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

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

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

Ответ 1

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

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

Или Prop

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

Ответ 2

Здесь много ответов, но, к сожалению, все они довольно старые и поэтому полагаются на 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.

Ответ 3

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

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

.val() также работает для выбора http://api.jquery.com/val/

Ответ 4

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

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

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

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

Ответ 5

Простейший метод

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

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

Я нахожусь на jQuery 1.7.1.

Ответ 6

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

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

}); 

Ответ 7

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

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

Ответ 8

О 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

Ответ 9

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

Ответ 10

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

Ответ 11

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

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

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

Ответ 12

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

<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

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

Ответ 13

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

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