在jQuery中取消选择<select>的最佳方法是什么?</select>

时间:2009-12-07 04:21:06

标签: jquery select

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

使用jQuery优雅地取消选择该选项的最佳方法是什么?

15 个答案:

答案 0 :(得分:320)

使用removeAttr ...

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

Prop

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

答案 1 :(得分:149)

这里有很多答案,但遗憾的是所有答案都很老,因此依赖于attr / removeAttr,这真的不是一条路。

@coffeeyesplease正确地提到了一个好的,跨浏览器的解决方案是使用

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

另一个很好的跨浏览器解决方案是

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

您可以看到它运行自检here。在IE 7/8/9,FF 11,Chrome 19上测试。

答案 2 :(得分:23)

自问过以来已经有一段时间了,我还没有在旧浏览器上测试过这个问题,但在我看来,答案更简单

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

.val()也适用于select http://api.jquery.com/val/

答案 3 :(得分:22)

最简单的方法

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

我只是在选择本身上使用它,它就可以了。

我在 jQuery 1.7.1

答案 4 :(得分:19)

到目前为止,答案仅适用于IE6 / 7中的多个选择;对于更常见的非多选,您需要使用:

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

这是由flyfishr64链接的帖子中解释的。如果你看一下,你会看到有两种情况 - 多/非多。没有什么可以阻止你去寻找完整的解决方案:

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

答案 5 :(得分:7)

哦,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

答案 6 :(得分:5)

快速谷歌找到了this post,它描述了如何在IE中为单个和多个选择列表执行所需操作。解决方案看起来也很优雅:

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

}); 

答案 7 :(得分:5)

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

这将遍历每个项目并仅取消选中已检查的项目

答案 8 :(得分:3)

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

答案 9 :(得分:2)

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

答案 10 :(得分:2)

非常感谢您的解决方案。

单选组合列表的解决方案非常有效。我在许多网站上搜索后发现了这一点。

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

答案 11 :(得分:2)

另一种简单的方法:

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

答案 12 :(得分: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

现在这不会从选项中删除所选属性,但我真正想要的只是值。

答案 13 :(得分:0)

$(“#select_id option:selected”)。prop(“ selected”,false);

答案 14 :(得分:0)

在您的选择中设置一个ID,例如:
//sheetss name var inventory = "inventory" var shopping = "shopping" // sheets var ss = SpreadsheetApp.getActiveSpreadsheet() var activeSheet = ss.getActiveSheet() var inventorySheet = ss.getSheetByName(inventory) var lr = anbardariSheet.getLastRow() //var sh = getSheet(); //custom function that returns target Sheet; var rng = activeSheet.getRange(3,3, lr, 1); //change to desired Range boundaries; //create TextFinder and configure; var tf = rng.createTextFinder('14'); // tf.matchCase(false); //{Boolean} -> match target text's case or not; tf.matchEntireCell(false); //{Boolean} -> check the whole Range or within; tf.ignoreDiacritics(true); //{Boolean} -> ignore diacretic signs during match; tf.matchFormulaText(false); //{Boolean} -> search in formulas (if any) or values; //invoke search; var res = tf.findNext(); //do something with result; if(res!==null) { var vals = res.getvalues(); Logger.log(vals); }

然后您可以使用:
<select id="foo" size="2">