文档章节

jquery select2 使用

蛋派
 蛋派
发布于 2016/03/30 09:33
字数 309
阅读 166
收藏 0

前端开发人员跑路了,领导说 select框要加一个  关键字模糊搜索 功能,,

好吧,鄙人不太懂前端的东西,,马上 google 找到了一个 jquery select2 插件,啃了 几分钟 鸡肠 文档

Html代码

 <div>
 <select name="pid" id="pid">
  <option value="1">父类1</option>
  <option value="2">父类2</option>
  <option value="3">父类3</option>
 </select>
</div>
<div>
 <select name="sid" id="sid"></select>
</div>

  JS

$(function(){
 var pObj = $("#pid");
 loadSubItem(pObj.val());
 pObj.change(function(){
  loadSubItem(pObj.val());
 });
});
function loadSubItem(pid) {
 if( pid < 1) {
  return false;
 }
 $.ajax({
  url:"data_json.json",
  success:callback,
 });
}
function callback(data) {
  if(data) { 
      $("#sid").select2({
         placeholder: '请选择',
         data: data
      });
  }
}

  --------------打开浏览器,刷新一下,, 效果不错,可以模糊搜索----------------

 

   ----------------接着,切换一下父分类,发觉没这么好用了,上一次 ajax加载的内容 还在-------------

 

   -------------遇到 问到,肯定是倒翻 一下鸡肠文档,,看到了一个方法 “destroy”--------

   干脆每次都先 销毁掉,再重新 执行 select2 好了,,,

   改进了一下  JS  callback函数,, 加上几句

  

 

好了,,每次 ajax 加载内容都是最新的了,,,

总结:其实就是  先判断一下 select2 是否已经实例化过,,如果实例化过,,先调 destroy 方法销毁掉,

再调$().html('')  置空元素里的内容, 再重新实例化插件

© 著作权归作者所有

上一篇: nginx 部署 https
下一篇: php curl shadowsocks
蛋派
粉丝 1
博文 4
码字总数 1353
作品 0
深圳
程序员
私信 提问
使用jquery实现权限添加的效果

两个列表都可以多选, 实现如下效果: 1、双击第一个列表中任意一个列表项,实现向下添加 2、双击第二个列表中任意一个列表项,实现删除,山东海运青岛港推动经济新发展 2、点击按钮,实现对...

墙头草
2011/08/31
195
0
jquery select2()的用法

用jquery的select2()插件写了一个自动补全的搜索框,jquery版本是:1.10.2 select2()版本是3.5.4 部分代码如下:只要加上ajax属性就报:Uncaught Error: Option 'ajax' is not allowed for Sele......

easonjiven
2015/09/02
15.1K
2
jQuery取得select选择的文本与值

jquery获取select选择的文本与值 获取select : 获取select 选中的 text : $("#ddlregtype").find("option:selected").text(); 获取select选中的 value: $("#ddlregtype ").val(); 获取selec......

donny945
2014/10/10
32
0
6月份最受欢迎的 15 个新的 jQuery 插件

每个月我们都会将上个月最新的和最受欢迎一些 jQuery 插件推荐给大家,现在让我们来看看上个月的最新热门 jQuery 插件吧。 1. jQuery++ jQuery++ 在 jQuery 1.7.x 的基础上增加了一些 DOM 助...

oschina
2012/07/04
5.1K
5
select2 4.0 如何绑定值

html代码: 效果: 需要的结果(绑上的值应该显示在输入框里):

kushu001
2015/08/26
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
今天
6
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
今天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
今天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
今天
17
0
浅谈java过滤器Filter

一、简介 Servlet中的过滤器Filter是实现了javax.servlet.Filter接口的服务器端程序,主要的用途是过滤字符编码、做一些业务逻辑判断如是否有权限访问页面等。其工作原理是,只要你在web.xml...

青衣霓裳
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部