首页 > 语言 > JavaScript > 正文

zTree插件之单选下拉菜单实例代码

2024-05-06 14:34:08
字体:
来源:转载
供稿:网友

代码如下:
<!--ztree树结构-->
<link rel="stylesheet" type="text/css" href="assets/ztree/css/zTreeStyle.css">
<link rel="stylesheet" type="text/css" href="assets/ztree/css/zTreeIcons.css">

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

<!--ztree树-->
<script src="assets/ztree/js/jquery.ztree-2.6.js"></script>

代码如下:
<div class="input-append">
                            <input class="input-medium" id="citySel" readonly type="text" value="">
                            <a id="menuBtn" class="btn" type="button"><i class="icon-search"></i></a>
                        </div>

 

<div id="DropdownMenuBackground" style="display:none; position:absolute;z-index:999;height:300px; min-width:163px; background-color:white;border:1px solid;overflow-y:auto;overflow-x:auto;">
    <ul id="dropdownMenu" class="tree"></ul>
</div>

代码如下:
<script type="text/javascript">
    var zTree1;
    var setting = {
        isSimpleData: true,
        treeNodeKey: "id",
        treeNodeParentKey: "pId",
        fontCss: setFont,
        callback: {
            beforeClick: zTreeOnBeforeClick,
            click: zTreeOnClick
        }           
    };
    var zNodes = [
        {id:1, pId:0, name:"北京"},
        {id:2, pId:0, name:"天津"},
        {id:3, pId:0, name:"上海"},
        {id:6, pId:0, name:"重庆"},
        {id:4, pId:0, name:"河北省", open:true},
        {id:41, pId:4, name:"石家庄"},
        {id:42, pId:4, name:"保定"},
        {id:43, pId:4, name:"邯郸"},
        {id:44, pId:4, name:"承德"},
        {id:5, pId:0, name:"广东省", open:true},
        {id:51, pId:5, name:"广州"},

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选