1,需要展示个树形下拉框多选
<html>
<head></head>
<body>
<input type="text" id="knowledgeText" name="knowledgeText" class="form-control history_content" value="" onclick="$('#hideDiv').show()" placeholder="请选择"/>
<div id="hideDiv" style="display: none;">
<div id="knowledgeTree"></div>
<button class="btn btn-danger" type="button" id="confirm">
<span class="glyphicon glyphicon-eye-open"></span> 确定
</button>
</div>
<link rel="stylesheet" href="css/bootstrap-treeview.min.css">
<script type="text/javascript" src="js/bootstrap-treeview.min.js"></script>
<script type="text/javascript">
$(function(){
// 树形下拉菜单
function getTree(strid) {
var game_id = $.cookie("game_id");
var tree = [
{text: '北京', id: 0, nodes: [
{text: '东城区',id: 1,nodes: []},
{text: '西城区',id: 2,nodes: []},
]},
{text: '河北省', id: 3, nodes: [
{text: '石家庄',id: 4,nodes: []},
]}
];
$.ajax({
type: "POST",
data: {game_id: game_id},
url: "history_parent_title",// 请求url
dataType: 'JSON',
success: function (data) {
if(data.code == 0){
$('#knowledgeTree').treeview({
color: "#428bca",
data: tree,
showCheckbox: true,
multiSelect: true,
levels: 0,
onNodeChecked: function (event, data) {
var str = $("#knowledgeText").val();
if (str.length > 0) {
$("#knowledgeText").val(str + data.text + ',');
} else {
$("#knowledgeText").val(data.text + ',');
}
},
onNodeUnchecked: function (event, data) {
var str = $("#knowledgeText").val();
$("#knowledgeText").val(str.replace(data.text + ",", ""));
}
});
}else{
toastr.error(data.message);
}
}
});
}
// 确认按钮
$("#confirm").on("click", function () {
$("#hideDiv").hide();
});
});
</script>
</body>
</html>
如有不足,请借鉴 博主 https://blog.csdn.net/princeluan/article/details/78864222
简单完成