js下拉框使用小结,基于JavaScript实现树形下拉框

大多数情况下后台会返回这样的数据,如果后台能够直接返回这种结构最好,需要首先将其转成树形json数据,在我的印象里Select2有2个版本,最新版本的select2如果引用的jquery版本较低的话,用了这么久的Select2插件

平时会经常遇到树形结构的问题,比如显示目录结构等。

用了这么久的Select2插件,也该写篇文章总结总结。当初感觉Select2不是特别好用,但又找不到比它更好的下拉框插件。

大多数情况下后台会返回这样的数据,如下:

在我的印象里Select2有2个版本,最新版本有一些新的特性,并且更新了一下方法参数,比最初版本要好看一些,本文针对新版本。

[
{ id: 19, pid: 0, name: 'nodejs' },
{ id: 20, pid: 19, name: 'express' },
{ id: 21, pid: 19, name: 'mongodb' },
{ id: 60, pid: 20, name: 'ejs' },
{ id: 59, pid: 0, name: '前端开发' },
{ id: 70, pid: 59, name: 'javascript' },
{ id: 71, pid: 59, name: 'css' },
{ id: 72, pid: 59, name: 'html' },
{ id: 73, pid: 59, name: 'bootstrap' },
{ id: 61, pid: 0, name: '视觉设计' },
{ id: 63, pid: 61, name: '网页设计' },
]

官网:

这种数据结构后台容易处理,但是前台不好处理,需要首先将其转成树形json数据,如下:

演示:

[
{ id: 19, pid: 0, name: 'nodejs',
 children:[
   { id: 20, pid: 19, name: 'express',children:[{ id: 60, pid: 20, name: 'ejs' }]},
   { id: 21, pid: 19, name: 'mongodb' }
   ]
},
{ id: 59, pid: 0, name: '前端开发',
 children:[
  { id: 70, pid: 59, name: 'javascript' },
  { id: 71, pid: 59, name: 'css' },
  { id: 72, pid: 59, name: 'html' },
  { id: 73, pid: 59, name: 'bootstrap' }
   ]
},
{ id: 61, pid: 0, name: '视觉设计',children:[{ id: 63, pid: 61, name: '网页设计' }]},
]

图片 1

这样就可以很方便的是用递归构建树形的组件。

由于博客系统的原因,所以只能演示简单的功能。

如果后台能够直接返回这种结构最好,不然前台需要做转换。

一.文件需要引入select2.full.js、select2.min.css(4.0.1版本)和jquery.1.8.3及以上

一、将list数组结构的数据转成tree结构json

最新版本的select2如果引用的jquery版本较低的话,某些功能无法正常使用。比如:清除功能allowClear:
true

//list 转成树形json
function listToTree(list,pid) {
var ret = [];//一个存放结果的临时数组
for(var i in list) {
if(list[i].pid == pid) {//如果当前项的父id等于要查找的父id,进行递归
 list[i].children = listToTree(list, list[i].id);
 ret.push(list[i]);//把当前项保存到临时数组中
}
}
return ret;//递归结束后返回结果
}

var tree=listToTree(list,0);//调用函数,传入要转换的list数组,和树中顶级元素的pid

console.log(tree);

最新版本请使用<select></select>标签(对于本地化的数据你可以使用input,但ajax远程数据必须使用select)

二、根据tree结构json数据生成下拉框

二.placeholder

//在网页中添加下拉框容器
<select id="selectbox" name=""></select>
//js脚本,递归生成
//获取容器对象
var selectbox=document.getElementById("selectbox");

//生成树下拉菜单
var j="-";//前缀符号,用于显示父子关系,这里可以使用其它符号
function creatSelectTree(d){
 var option="";
 for(var i=0;i<d.length;i++){
 if(d[i].children.length){//如果有子集
  option+="<option value='"+d[i].id+"'>"+j+d[i].name+"</option>";
 j+="-";//前缀符号加一个符号
  option+=creatSelectTree(d[i].children);//递归调用子集
 j=j.slice(0,j.length-1);//每次递归结束返回上级时,前缀符号需要减一个符号
  }else{//没有子集直接显示
  option+="<option value='"+d[i].id+"'>"+j+d[i].name+"</option>";
  }
  }
 return option;//返回最终html结果
 }

//调用函数,并将结构出入到下拉框容器中
selectbox.innerHTML=creatSelectTree(tree);

placeholder占位提示文字,如果需要清楚功能,则必须设置placeholder。

如果大家还想深入学习,可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

三.加载本地数据

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

select2默认的数据属性是id、text,新版本可以自定义,但还是用默认的比较好。所以提供的json中最好转换为id、text形式,当然可以添加其他属性。

您可能感兴趣的文章:

  • js实现带搜索功能的下拉框实时搜索实时匹配
  • jquery及原生js获取select下拉框选中的值示例
  • Extjs中ComboBoxTree实现的下拉框树效果(自写)
  • js 动态选中下拉框
  • 基于jquery的无限级联下拉框js插件
  • Js获取下拉框选定项的值和文本的实现代码
  • JS实现下拉框的动态添加(附效果)
  • JS操作select下拉框动态变动(创建/删除/获取)
  • js 自定义的联动下拉框
  • javascript
    下拉框显示当前日期
var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
$("#c01-select").select2({
 data: data,
 placeholder:'请选择',
 allowClear:true
})

四.加载远程数据

$("#c01-select").select2({
 ajax: {
 url: "data.json",
 dataType: 'json',
 delay: 250,
 data: function (params) {
 return {
 q: params.term,
 };
 },
 processResults: function (data) {
 return {
 results: data
 };
 },
 cache: true
 },
 escapeMarkup: function (markup) { return markup; }, 
 minimumInputLength: 1,
 templateResult: formatRepo, 
 templateSelection: formatRepoSelection 
});

说明:

     1.q: params.term
查询参数(params.term表示输入框中内容,q发生到服务器的参数名;所以这里你可以添加自定义参数,如:stype:’person’)

     2.processResults中results:
data返回数据(返回最终数据给results,如果我的数据在data.res下,则返回data.res。这个与服务器返回json有关)

     3.minimumInputLength
最小需要输入多少个字符才进行查询,与之相关的maximumSelectionLength表示最大输入限制。

     4.escapeMarkup字符转义处理

     5.templateResult返回结果回调function formatRepo(repo){return
repo.text},这样就可以将返回结果的的text显示到下拉框里,当然你可以return
repo.text+”1″;等

     6.templateSelection选中项回调function
formatRepoSelection(repo){return repo.text}

     7.关于返回的
json的格式:select2默认json格式为[{id:1,text:’text’},{id:2,text:’text’}],新版严格要求这样的格式,当然你可以添加列,如:[{id:1,text:’text’,name:’liu’}]

五.获取选中项

var res=$("#c01-select").select2("data")[0] ; //单选
var reslist=$("#c01-select").select2("data"); //多选
if(res==undefined)
{
 alert("你没有选中任何项");
}
if(reslist.length)
{
 alert("你选中任何项");
}

六.清空选择项和设置不可用

//清空选择
$("#c01-select").val(null).trigger("change");
$("#c01-select").val("你的placeholder").trigger("change");//或者
//如果你使用的是input标签(默认就是本地数据),你可以用$("#c01-select").val('');来清空选项
//disabled
$("#c01-select").prop("disabled", false);//可用
$("#c01-select").prop("disabled", true);//不可用

七.启用多选

$("#c01-select").select2({
 data:data,
 multiple: true
});

多选演示:

图片 2

八.下面简单说明新版与老版对比

1.结果回调和选中回调名称:formatResult、formatSelection(老版);templateResult、templateSelection(新版)

2.初始化:

//老版,注意如果初始化时文本框中本身没有值(为空),则不会触发该方法
initSelection: function (element, callback) {
 var id = $(element).val();
 var data = { id: id, text: id};//这里是初始化的数据,你可以通过id来从服务器上获取(ajax),再装载进去
 callback(data);
}

//新版,直接给select添加option
$("#id").append(new Option("Jquery", 10001, false, true));
//或者
$("#id").append("<option value='10001'>Jquery</option>");

3.获取或设置值:select2(“val”)(老版);$(“select”).val()(新版)

推荐使用

var res = $("#id").select2("data");
//返回数组,单选就取res[0];好处是不进可以获取id、text还可以获取其他属性,如res[0].names

4.停用或启用:$(“select”).enable(false);(老版);$(“select”).prop(“disabled”,
true);(新版)

5.主题样式:新版的样式已经更新,但如果想使用老版样式则可以设置 theme:
“classic”

如果大家还想深入学习,可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • Angularjs实现带查找筛选功能的select下拉框示例代码
  • AngularJS使用ng-repeat指令实现下拉框
  • JS仿百度自动下拉框模糊匹配提示
  • js自定义select下拉框美化特效
  • js实现带搜索功能的下拉框实时搜索实时匹配
  • jquery及原生js获取select下拉框选中的值示例
  • Extjs中ComboBoxTree实现的下拉框树效果(自写)
  • js 动态选中下拉框
  • 基于jquery的无限级联下拉框js插件
  • js实现下拉框效果(select)