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

JavaScript08

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

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

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

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

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

思路就是：找出父节点的所有子节点的checked的属性设置成与父节点一致即可

我是利用jquery实现，看看是否符合你的要求

<script src="../lib/jquery.js" type="text/javascript"></script>

<script src="../jquery.treeview.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

$("#tree").treeview()

$("input[name='ids']").click(function(){

var checkedValue = this.checked

$(this).parent("li").find("input[name='ids']").attr("checked",checkedValue)

})

})

</script>

<ul id='tree'>

<li>

<input type='checkbox' name='ids' id="test"/>

<span class='folder'>test1</span>

<ul>

<li>

<input type='checkbox' name='ids' />

<span class='folder'>test11</span>

</li>

</ul>

<ul>

<li>

<input type='checkbox' name='ids' />

<span class='folder'>test12</span>

<ul>

<li>

<input type='checkbox' name='ids' />

<span class='folder'>test121</span>

</li>

</ul>

</li>

</ul>

</li>

</ul>

父

<input type="checkbox" onclick="selectAll(this)"/>

子

<input type="checkbox"/>

<input type="checkbox"/>

<input type="checkbox"/>

function selectAll(checkbox) {

$('input[type=checkbox]').attr('checked', $(checkbox).attr('checked'))

}