如何用js实现select下拉框里是树形结构，可复选，select框中传复选所有值？如下图所示。

JavaScript08

如何用js实现select下拉框里是树形结构，可复选，select框中传复选所有值？如下图所示。,第1张

首先说树形结构，国内有个开源的js控件叫zTree，支持复选。

然后下拉框你可能需要自己做一个（html输入框+右边的一个图标按钮）。

最后，用一个隐藏的div把树形结构包起来，这个div设置成绝对定位，在下拉框右侧选择按钮的单击事件处理函数里，显示这个隐藏的div，并把它的位置设置成在下拉框下面就行了。

思路就是这样，要么楼主可以找找有没有其他更现成的控件，extjs4我记得有类似的，但是他的复选功能不太符合中国习惯，也许现在的版本改好了，你可以查查试试看。

一个带有右键操作的树形菜单

$(document).ready(function(){

$.ajaxSetup({cache:false})

$("#browser").tree({

data : {

type : "json",

url : src,

async : true,

async_data : function (NODE) {

return { parent_Id : $(NODE).attr("id") || 0}

}

},

lang:{

loading:"目录加载中……"

},

rules:

{

draggable : "all" //这个设置可以使得节点进行拖动操作

},

ui:{

context : [ //自定义右键操作的可操作内容

{

id : "create",

label : "添加下级目录", //右键弹出菜单的此项操作屏显字样

visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return falsereturn TREE_OBJ.check("creatable", NODE)}, //允许节点被右击时出现操作菜单

icon: "<%=request.getContextPath() %>/css/themes/default/create.png",//右键弹出菜单的此项操作图标

action : function (NODE, TREE_OBJ) {

//进行此项操作，将有这个函数事件被响应

}

},

"separator"//这个是在两个操作之间画一条分隔线

,

{

id : "edit",

label : "编辑目录信息",

visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return falsereturn TREE_OBJ.check("creatable", NODE)},

icon: "<%=request.getContextPath() %>/image/reg2.gif",

action : function (NODE, TREE_OBJ) {

openWindow('myurl','','',function(){treeRefresh($(NODE).attr("id"))})

}

},

"separator"

,

{

id : "privilege",

label : "设置目录权限",

visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return falsereturn TREE_OBJ.check("creatable", NODE)},

icon: "<%=request.getContextPath() %>/css/themes/default/rename.png",

action : function (NODE, TREE_OBJ) {

openWindow('myurl','','',function(){treeRefresh($(NODE).attr("id"))})

}

},

"separator",

{

id : "delete",

label : "删除",

visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return falsereturn TREE_OBJ.check("creatable", NODE)},

icon: "<%=request.getContextPath() %>/css/themes/default/remove.png",

action : function (NODE, TREE_OBJ) {

var tree=$.tree_reference("browser")

openWindow('myurl','','',function(){

//下边的.parent()和.refresh()均为v0.9.8版本提供，如果你使用的是其他版本如v0.9.6等，这些将不被支持。

NODE=$(tree.parent(NODE))

if($(NODE).attr("id")==undefined){

tree.refresh()

}else{

TreeRefresh()

}

})

}

},

"separator",

{

id : "others",

label : "其他操作",

visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return falsereturn TREE_OBJ.check("creatable", NODE)},

icon: "<%=request.getContextPath() %>/css/images/cut.png",

action : function (NODE, TREE_OBJ) {

alert("暂无可提供操作。")

}

}

]

},

callback : {

onselect: function(node) {

//(a)

}

}

})

function treeRefresh(nodeid){

var rid=nodeid

var tree=$.tree_reference("browser")

var par_node=tree.parent($("#"+rid))

tree.refresh(par_node)

}

})

您好，很高兴为您解答。

<%@ page language="java" contentType="text/html charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--  IE使用它所支持的最新版本-->

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>tree</title>

<link href="../css/bootstrap.min.css" rel="stylesheet">

<link href="../css/style.min.css" rel="stylesheet">

<link href="../css/font-awesome.min.css" rel="stylesheet">

</head>

<body>

  <div id="myTree">

    <ul>

      <li>Root 1</li>

      <li>Root 2

        <ul>

          <li id="child1">

            <a>child 1</a>

            <ul>

              <li>child 1-1</li>

              <li>child 1-2</li>

            </ul>

          </li>

          

          <li>child 2</li>

          <li>child 3</li>

        </ul>

      </li>

      <li>Root 3</li>

    </ul>

  </div>

  

  <script src="../js/jquery.min.js"></script>

  <script src="../js/bootstrap.min.js"></script>

  <script src="../js/jstree.min.js"></script>

  <script>

  $(function () { 

$('#myTree').jstree()

$('#myTree').on("changed.jstree", function (e, data) {

  console.log(data.selected)

  }) 

$('button').on('click', function () {

      $('#myTree').jstree(true).select_node('child1')

      $('#myTree').jstree('select_node', 'child1')

      $.jstree.reference('#myTree').select_node('child1')

  }) 

  })

  </script>

  

</body>

</html>

如若满意，请点击右侧【采纳答案】，如若还有问题，请点击【追问】

希望我的回答对您有所帮助，望采纳！

~ O(∩_∩)O~