1.单选模式
<select placeholder="请选择树的内容" id="tree1">
<option value="1" data-pid="0">一级节点1</option>
<option value="1-2" data-pid="1">子节点12</option>
<option value="1-2-3" data-pid="1-2">子节点123</option>
<option value="1-3" data-pid="1">子节点13</option>
<option value="1-3-1" data-pid="1-3">子节点131</option>
<option value="1-3-2" data-pid="1-3" >子节点132</option>
<option value="1-3-3" data-pid="1-3">子节点133</option>
<option value="1-3-4" data-pid="1-3">子节点134</option>
<option value="1-3-5" data-pid="1-3">子节点135</option>
<option value="1-3-4-1" data-pid="1-3-4">子节点1341</option>
<option value="2" data-pid="0">一级节点2</option>
<option value="3" data-pid="0">一级节点3</option>
<option value="2-1" data-pid="2">子节点21</option>
</select>
$("#tree1").selectTree();
2.多选模式
<select placeholder="请选择树的内容" id="tree2" multiple>
<option value="1" data-pid="0">一级节点1</option>
<option value="1-2" data-pid="1">子节点12</option>
<option value="1-2-3" data-pid="1-2">子节点123</option>
<option value="1-3" data-pid="1">子节点13</option>
<option value="1-3-1" data-pid="1-3">子节点131</option>
<option value="1-3-2" data-pid="1-3" >子节点132</option>
<option value="1-3-3" data-pid="1-3">子节点133</option>
<option value="1-3-4" data-pid="1-3">子节点134</option>
<option value="1-3-5" data-pid="1-3">子节点135</option>
<option value="1-3-4-1" data-pid="1-3-4">子节点1341</option>
<option value="2" data-pid="0">一级节点2</option>
<option value="3" data-pid="0">一级节点3</option>
<option value="2-1" data-pid="2">子节点21</option>
</select>
$("#tree2").selectTree();
在select标签上直接设置'multiple'属性,实现多选模式。
1.默认展开一级
$("#tree3").selectTree({
expandLevel: 1
});
2.展开全部层级
$("#tree4").selectTree({
expandAll: true
});
1.单选选中
在选中的option标签中设置selected属性即可默认选中。
2.多选选中
在选中的option标签中设置selected属性即可默认选中。
1.单选模式
在选中的option标签中设置disabled属性禁用选项。
2.多选模式
在选中的option标签中设置disabled属性禁用选项。
1.单选模式
2.多选模式
1.单选模式
请打开控制台查看输出
2.多选模式