js清空select选中的值和选项

使用jQuery操作HTML下拉框

最新推荐文章于 2021-12-15 11:25:37 发布

原创最新推荐文章于 2021-12-15 11:25:37 发布 · 5.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #jsp #javascript

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何利用jQuery来动态地向HTML下拉框中添加选项，并提供了一种方法来清空已有的选项和取消选定的值。适用于需要动态更新下拉框内容的场景。

html中的下拉选项，后面的选项可通过jq追加进来：
<form:select path="testId" id="testId" name="testId" class="input-xlarge ">
   <form:option value="" label=""/>
</form:select>

jq追加选项：
$("#testId").append( //此处向select中循环绑定数据
 "<option value="+data.testist[i].id+ ">" + data.testist[i].name+ "</option>");

通过下面两个清空select内的选项和选中的值，其实一般用empty()可以把两个内容都清除了，但是避免其他情况（我就遇到了只能清除选项不能清楚选中的值的问题），要把text也设置为空，.select2-chosen这个需要你用f12去调试网页，看看select选中的值的class是什么，然后换成那个class。
$("#testId").empty();
$(".select2-chosen").text("");