<!--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:, pId:, name:"北京"},
{id:, pId:, name:"天津"},
{id:, pId:, name:"上海"},
{id:, pId:, name:"重庆"},
{id:, pId:, name:"河北省", open:true},
{id:, pId:, name:"石家庄"},
{id:, pId:, name:"保定"},
{id:, pId:, name:"邯郸"},
{id:, pId:, name:"承德"},
{id:, pId:, name:"广东省", open:true},
{id:, pId:, name:"广州"},
{id:, pId:, name:"深圳"},
{id:, pId:, name:"东莞"},
{id:, pId:, name:"佛山"},
{id:, pId:, name:"福建省", open:true},
{id:, pId:, name:"福州"},
{id:, pId:, name:"厦门"},
{id:, pId:, name:"泉州"},
{id:, pId:, name:"三明"}
]; function setFont(treeId, treeNode) {
if (treeNode && treeNode.isParent) {
return {color: "blue"};
} else {
return null;
}
}
function showMenu(){
var cityObj = $("#citySel");
var cityOffset = $("#citySel").offset();
$("#DropdownMenuBackground").css({left:cityOffset.left+"px",top:cityOffset.top+cityObj.outerHeight()+"px"}).slideDown("fast");
}
function reloadTree(){
hideMenu();
zTree1 = $("#dropdownMenu").zTree(setting, zNodes);
}
function hideMenu() {
$("#DropdownMenuBackground").fadeOut("fast");
}
function zTreeOnBeforeClick(treeId, treeNode) {
var check = (treeNode && !treeNode.isParent);
if (!check) alert("只能选择城市...");
return check;
} function zTreeOnClick(event, treeId, treeNode) {
if (treeNode) {
var cityObj = $("#citySel");
cityObj.attr("value", treeNode.name);
hideMenu();
}
} $(document).ready(function(e) {
reloadTree();
$("#menuBtn").bind("click",
function(){
if($("#DropdownMenuBackground").css("display") == "none"){
showMenu();
}
else{
hideMenu();
}
}
);
$("body").bind("mousedown",
function(event){
if (!(event.target.id == "DropdownMenuBackground" || $(event.target).parents("#DropdownMenuBackground").length>)) {
hideMenu();
}
});
});
</script>

转载请注明:http://www.tea119.com

zTree插件之单选下拉菜单代码的更多相关文章

  1. zTree插件之多选下拉菜单代码

    zTree插件之多选下拉菜单代码 css和js <!--ztree树结构--> <link rel="stylesheet" type="text/cs ...

  2. 可控制导航下拉方向的jQuery下拉菜单代码

    效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...

  3. z-tree官方提供的下拉菜单案例

    1.z-tree官方提供的下拉菜单案例 <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - selec ...

  4. jquery插件制作,下拉菜单

    要求输入框点击出现下拉菜单,并实现以下功能: 1.首先点击地点标签页,选择好地点: 2.自动显示相应节点标签页显示节点信息,选择好节点 3.自动显示相应的连接点,选择连接点,连接点被选中并被传送的输入 ...

  5. ztree连接数据库,实现下拉菜单

    $(document).ready(function(){ var treeObj = $("#treeDemo"); $.fn.zTree.init(treeObj, setti ...

  6. js 导航栏多项点击显示下拉菜单代码

    <!DOCTYPE html> <html> <head> <title>Dropdown</title> <!--<link ...

  7. 小米网css3导航下拉菜单代码

    效果:http://hovertree.com/texiao/css3/19/ 代码如下: <!doctype html> <!-- W3C规范 --> <html la ...

  8. yii2框架dropDownList的下拉菜单用法介绍

    Yii2.0 默认的 dropdownlist 的使用方法.  代码如下 复制代码 <?php echo $form->field($model, 'name[]')->dropDo ...

  9. Bootstrap单按钮的下拉菜单

    简介 把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了. 插件依赖 按钮式下拉菜单依赖下拉菜单插件 ,因此需要将此插件包含在你所使用的 Bootst ...

随机推荐

  1. AJAX联想查询的例子

    //通过输入值的不断改变而改变(按键事件)提示内容的功能,然后可以选着你想要的内容填充进来. html主要代码:test1.html <!DOCTYPE html><html> ...

  2. 第2章 使用JavaScript

    学习要点: 1.创建一张HTML页面 2.<Script>标签解析 3.JS代码嵌入的一些问题

  3. 弹出层js让DIV居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 安装配置redis

    1.1查看当前系统环境 查看当前系统版本信息: 查看当前网络连通情况: 1.2使用yum安装 1.3确认redis的安装目录 1.4查看\修改配置文件 1.5启动redis服务并验证 1.6使用tel ...

  5. 了解C++默认编写并调用哪些函数

    概念:编译器可以暗自为class创建default构造函数.copy构造函数.copy assignmengt构造函数,以及析构函数. 比如你写下:struct Node { }; 这就好像你写下这样 ...

  6. js控制只允许输入数字

    avascript 只允许输入数字有很多方法,总结如下 1,只允许输入数字和小数点. <input onKeypress="return (/[\d.]/.test(String.fr ...

  7. 图解call、apply、bind的异同及各种实战应用演示

    一.图解call.apply.bind的异同 JavaScript中函数可以通过3种方法改变自己的this指向,它们是call.apply.bind.它们3个非常相似,但是也有区别.下面表格可以很直观 ...

  8. ios-NSMutableAttributedString 更改文本字符串颜色、大小

    NSString * string = [NSString stringWithFormat:@"您的号码是%@号",[self backString:dic[@"ran ...

  9. Yii源码阅读笔记(二十七)

    Theme 类,即一个应用的主题,主要通过替换路径实现主题的应用,里边的方法为获取根路径和根链接,以及应用主题的方法: namespace yii\base; use Yii; use yii\hel ...

  10. CGContextAddCurveToPoint 的深入理解

    CGContextAddCurveToPoint 这个函数看上去一般般,仔细琢磨发现不简单,为什么三个点就可以确定一条曲线呢? 网上查了查,小小研究了一下下. 1.关键知识 窃取自 (http://l ...