利⽤easyui-combotree实现下拉菜单多选功能（带多选框）最终的效果图原easyui-combotree样式
Html
<select id="select_order_type" name="select_order_type" class="easyui-combotree"  multiple ></select>
JavaScript
其中 <{$select_option_order_type}> 为 php后端 Smarty 赋值例： { "id":1, "text":"订机"  }, { "id":2, "text":"My BBBBB"  }, { "id":3, "text":"My CCCCC"  }
注意：双引号必须要有
//easyui-combotree 加载数据
$("#select_order_type")botree({
data: [ <{$select_option_order_type}> ]
});
//页⾯加载完成后执⾏
$(document).ready(function(){
//easyui-combotree 去掉图标
$(".tree-icon,.tree-file").removeClass("tree-icon tree-file");
$(".tree-icon,.tree-folder").removeClass("tree-icon tree-folder tree-folder-open tree-folder-closed");
});
//EasyUI Combotree 获取所有选中的节点
function getCombotreePropValues(combotreeId){
var result = "";
var tr= $("#"+combotreeId)botree('tree');
var nodes = tr.tree('getChecked');
if(nodes.length > 0){
for(var i=0; i<nodes.length; i++){
//console.log(nodes[i] );
//result += nodes[i].id + ":"+nodes[i].text + "," ; //1:My AAAAA,2:My BBBBB,3:My CCCCC
result += nodes[i].text + "," ;
}
if(result.indexOf(",") > -1){
result = result.substring(0, result.length - 1);
}
}
return result;
};
取值
//easyui-combotree 获取选中值
var order_type=getCombotreePropValues("select_order_type");
    如果不选则返回空
    如果选⼀个则返回⼀个值没有逗号如订机
    如果选两个及以上则返回多个值⽤逗号分隔如订机，投诉，咨询
  如果判断必须选中三项则
//必须选中三项
var subject=getCombotreePropValues("consult_subject"); //alert(subject);//easyui-combotree 获取选中值
if(subject==''){
alert('请选择3+3科⽬！');
return;
}else{
var arr_subject =subject.split(","); //字符串转数组
if(arr_subject.length!=3){
alert('3+3科⽬必须选 3 项！');
return;
}
}
JavaScript 赋选中项
例：在数据库中取到的选中项为
  ⽣物，物理，历史
Combotree 设置所有选中的节点的⽅法
//EasyUI Combotree 设置所有选中的节点
function setCombotreeSelectedItem(combotreeId,strSelectedText){
//所有项
//获取combotree的树tree对象
var tree = $('#'+combotreeId)botree('tree');
//var str=JSON.stringify(tree);  console.log(str+"---------- "+tree);
//通过树tree对象获取根节点
var root = ('getRoot');
//var str1=JSON.stringify(root); console.log(str1+"---------------------------");
//通过根节点获取根节点下的⼦节点
var json_select_data = ('getChildren',root); //所有项
//var children1=JSON.stringify(children);console.log(children1+"---------------------------");
//选中项
var arr_selected= new Array();
jquery获取下拉框选中值
arr_selected = strSelectedText.split(","); //选中项⽣物，物理，历史
var arr_id='';
for (var i in arr_selected ) //遍历选中项
{
//console.log(arr_selected[i]);
for( var j in json_select_data){ //遍历所有项  json_select_data 数组时，i为索引
//console.log(json_select_data[i].id + " " + json_select_data[i].text);
if(arr_selected[i]==json_select_data[j].text){
if(arr_id==""){
arr_id=json_select_data[j].id;
}else{
arr_id=arr_id+","+json_select_data[j].id;
}
}
}
}
$('#'+combotreeId)botree('setValues', arr_id);
  }
调⽤⽅法：
subject为 combotree控件的 id
//在数据库中取到选中项的格式
var strText="⽣物，物理，历史";
/
/设置选中项
setCombotreeSelectedItem('subject',strText);
Html
<select id="subject" name="subject"  class="easyui-combotree"  multiple  >
清空所有选中项
$("#subject")botree("clear");
注意：在  $('#fm').form('load',row);  之后如果  combotree 没有选中项
就必须⽤  $("#subject")botree("clear");  清空所有选中，否则每次选中的项后⾯会多加⼀个逗号如：
解决⽅法：
$('#fm').form('load',row);
if(row.subject!=null && row.subject!=""){
//设置所有选中的节点的⽅法
setCombotreeSelectedItem('subject',row.subject);  //row.subject 为⽣物，物理，历史}else{
$("#subject")botree("clear");
}
将  easyui-combotree 设为只读并清空所选项
$('#consult_subject')bobox("readonly",true);//设只读
$("#consult_subject")botree("clear");//清空所选项

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。