<select size="2">
<option selected="selected">Input your option</option>
<option>Input your option</option>
</select>
Каков наилучший способ использования jQuery, чтобы элегантно отменить выбор?
<select size="2">
<option selected="selected">Input your option</option>
<option>Input your option</option>
</select>
Каков наилучший способ использования jQuery, чтобы элегантно отменить выбор?
Используйте 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() также работает для выбора http://api.jquery.com/val/
Ответы пока работают только для нескольких выборок в IE6/7; для более распространенного не-multi-select вы должны использовать:
$("#selectID").attr('selectedIndex', '-1');
Это объясняется в сообщении, связанном с flyfishr64. Если вы посмотрите на него, вы увидите, как есть два случая: multi/non-multi. Нет ничего, что мешало бы вам выполнять как полное решение:
$("#selectID").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
$('select').val('')
Я просто использовал это на самом select, и он сделал трюк.
Я нахожусь на 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 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