select2清空选择框
2016-03-23 10:07
253 查看
初始状态:
用户选择后:
当我们需要清空这个选择框的内容该怎么办
通过$('#subject').val("")可以将select2的选择框内的val清空,但是在页面上显示的仍然是原有的内容(998(1.1版)),并不会回到初始状态,这样看上去就不太对
然后通过控制台发现选择框内的信息是显示在select2-subject-container这个id下的,在用户选择完之后,他会默认将选择的显示信息加在这个id下面<span>998(1.1版)</span>
所以在将val清空之后显示信息并没有改变
那我们就将select2-subject-container下的信息清空
$("#select2-subject-container").attr("title","");
$("#select2-subject-container").empty();
这样选择框上显示的就是空白了,但是感觉还是怪怪的,因为原来有浅灰色的字写着请选择名称
那就在清空后我们再将这句话加回去
var str=$("<span class='select2-selection__placeholder'>请选择名称</span>");
$("#select2-subject-container").prepend(str);
这样就回到了初始状态了,目前我想到的方法比较简单粗暴,但是用用挺好的
所有代码:
var str=$("<span class='select2-selection__placeholder'>请选择名称</span>");
$('#subject').val("");
$("#select2-subject-container").attr("title","");
$("#select2-subject-container").prepend(str);
$("#select2-subject-container").empty();
用户选择后:
当我们需要清空这个选择框的内容该怎么办
通过$('#subject').val("")可以将select2的选择框内的val清空,但是在页面上显示的仍然是原有的内容(998(1.1版)),并不会回到初始状态,这样看上去就不太对
然后通过控制台发现选择框内的信息是显示在select2-subject-container这个id下的,在用户选择完之后,他会默认将选择的显示信息加在这个id下面<span>998(1.1版)</span>
所以在将val清空之后显示信息并没有改变
那我们就将select2-subject-container下的信息清空
$("#select2-subject-container").attr("title","");
$("#select2-subject-container").empty();
这样选择框上显示的就是空白了,但是感觉还是怪怪的,因为原来有浅灰色的字写着请选择名称
那就在清空后我们再将这句话加回去
var str=$("<span class='select2-selection__placeholder'>请选择名称</span>");
$("#select2-subject-container").prepend(str);
这样就回到了初始状态了,目前我想到的方法比较简单粗暴,但是用用挺好的
所有代码:
var str=$("<span class='select2-selection__placeholder'>请选择名称</span>");
$('#subject').val("");
$("#select2-subject-container").attr("title","");
$("#select2-subject-container").prepend(str);
$("#select2-subject-container").empty();
相关文章推荐
- java 反编译工具:JD-GUI、JD-Eclipse、JD-IntelliJ
- php-fpm使用sock配置与nginx配置sock连接
- "The graphics preview in the layout editor may not be accurate: Path.isConvex is not supported. (Ig
- Java 日期
- nginx配置
- Zend Framework教程之Zend_Db_Table表关联实例详解
- Ubuntu远程登录及拷贝遇到的问题
- 高性能JavaScript之DOM编程
- Linux Shell编程第四篇case语句
- [随笔]Linux下常用压缩文件(*.tar.gz *.tar.xz *.zip ...)的解压方法
- signalR的一些细节
- linux 安装 maven
- jedis,spring-redis-data 整合使用,版本问题异常以及解决。
- C语言第五篇:位运算
- 物理层、mac层、IP层、TCP(UDP)帧格式-------未完待续
- web-避免表单重复提交
- SSO单点登录的PHP实现方法(Laravel框架)
- 网易2016暑期实习生笔试题(技术+非技术)
- Java——SAX方式生成XML
- LeetCode 21 Merge Two Sorted Lists