select下拉框使用完毕后,重置按钮使其清空

Posted xuchao0506

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了select下拉框使用完毕后,重置按钮使其清空相关的知识,希望对你有一定的参考价值。

需求描述:select下拉框后边有两个按钮,一个查询,一个重置,点击重置,select会清空之前选择的那个查询条件

解决思路:卧槽,这不so easy 么,用那个jQ封装的trigger函数搞定啊,对select赋个null的值,我真是个人才,哈哈哈哈哈哈哈嗝(仿佛听到了一群人在说MDZZ~~~),好了,上代码

代码:

 <button class="btn sbold green" id="resetBut" name="resetBut" th:onclick="|resetBut()|">
  <span class="ladda-label">重置</span>
</button>

js代码:

function resetBut(){
$("#select1").val(null).trigger("change"); //一行就搞定 红红火火恍恍惚惚哈哈哈哈哈哈
}

总结:感觉没啥要说的,这个就是灵机一动。





以上是关于select下拉框使用完毕后,重置按钮使其清空的主要内容,如果未能解决你的问题,请参考以下文章

vue清空表单数据后显示所有列表内容

ant-design-vue——select下拉框tags清空已选数据

踩iviewui中Select 选择器两级联动,重置查询条件时第二级数据无法清除的坑

表单提交后怎么样才能不清空文本框和下拉框的值呢?

iview select下拉bug

解决element-plus el-autocomplete点击清空按钮,再输入内容下拉框不显示问题。