java菜单动态加载功能_Javascript实现动态菜单添加
在注册信息的时候,常常需要通过下拉菜单让用户选择,而且希望用户在第一个下拉框做的选择,影响第二个下拉框的内容。有时候,如果第一个下拉框不作出选择,第二个下拉框根本不会页面上显示,为了给用户呈现一个更清晰的页面。
先来看看效果:
Html源码:
动态改变菜单
Province:
Please Choose Province
HeBei
ShanDong
City:
Area:
Javascript源码
$(document).ready(function () {
//找到三个下拉框
var ProvinceSelect = $(".Province").children("select");
var CitySelect = $(".City").children("select");
var AreaSelect = $(".Area").children("select");
var AddressSelect=$(".AddressSelect");
//给第二个下拉框注册事件
ProvinceSelect.change(function () {
//1、获取当前下拉框的值
var ProvinceValue = $(this).val();
//1.1只要第一个下拉框内容有变化,第三个下拉框就要隐藏起来
AreaSelect.parent().hide();
AddressSelect.hide();
AddressSelect.html("");
//2、如果值不为空,则显示城市下拉框
if (ProvinceValue != "") {
CitySelect.html("");
$("Please Choose City").appendTo(CitySelect);
switch(ProvinceValue)
{
//实际项目中,这个城市数组肯定是在服务器获取的,这里为了简便,我就直接自定义了一个数组
//如果追求完美,这里还可以加一道缓存,防止重复获取
case "HeBei":
var CityOfHeBei=["ShiJiaZhuang","CangZhou","LangFang"];
for(var i=0;i
$(""+CityOfHeBei[i]+"").appendTo(CitySelect);
}
break;
case "ShanDong":
var CityOfShanDon=["JiNan","DeZhou","QingDao"];
for(var i=0;i
$(""+CityOfShanDon[i]+"").appendTo(CitySelect);
}
break;
}
CitySelect.parent().show();
} else {
CitySelect.parent().hide();
}
});
//给第二个下拉框注册事件
CitySelect.change(function () {
var CityValue = $(this).val();
AddressSelect.hide();
AreaSelect.parent().hide();
AddressSelect.html("");
if (CityValue != "") {
AreaSelect.html("");
$("Please Choose Area").appendTo(AreaSelect);
switch(CityValue)
{
//实际项目中,这个区数组肯定是在服务器获取的,这里为了简便,我就直接自定义了一个数组
//如果追求完美,这里还可以加一道缓存,防止重复获取
case "ShiJiaZhuang":
var AreaOfCity=["GaoXinQu","KaiFaQu","XinHuaQu"];
for(var i=0;i
$(""+AreaOfCity[i]+"").appendTo(AreaSelect);
}
break;
case "CangZhou":
var AreaOfCity=["XinHuaQu","YunHeQu"];
for(var i=0;i
$(""+AreaOfCity[i]+"").appendTo(AreaSelect);
}
break;
case "LangFang":
var AreaOfCity=["AnCiQu","GuangYangQu"];
for(var i=0;i
$(""+AreaOfCity[i]+"").appendTo(AreaSelect);
}
break;
case "QingDao":
var AreaOfCity=["GaoXinQu","KaiFaQu","XinHuaQu"];
for(var i=0;i
$(""+AreaOfCity[i]+"").appendTo(AreaSelect);
}
break;
case "DeZhou":
var AreaOfCity=["XinHuaQu","YunHeQu"];
for(var i=0;i
$(""+AreaOfCity[i]+"").appendTo(AreaSelect);
}
break;
case "JiNan":
var AreaOfCity=["AnCiQu","GuangYangQu"];
for(var i=0;i
$(""+AreaOfCity[i]+"").appendTo(AreaSelect);
}
break;
}
AreaSelect.parent().show();
} else {
AreaSelect.parent().hide();
}
});
AreaSelect.change(function(){
var AreaValue=$(this).val();
AddressSelect.html("");
if (AreaValue!=""){
$("The Address Is --Province: "+ProvinceSelect.val()+" City: "+CitySelect.val()+" Area: "+AreaSelect.val()+"").appendTo(AddressSelect);
AddressSelect.show();
//alert("The Address Is Province: "+ProvinceSelect.val()+" City: "+CitySelect.val()+" Area: "+AreaSelect.val());
}
})
});
这里还引用了Jquery,貌似实现这个效果,用不用都无所谓,最近为了熟悉Jquery的用法,所以就加上了。
java菜单动态加载功能_Javascript实现动态菜单添加相关推荐
- JS动态加载脚本及对动态脚本内方法的调用
JS动态加载脚本及对动态脚本内方法的调用 摘要 JS动态加载脚本及对动态脚本内方法的调用 JS 动态 添加脚本 按需加载 首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package ...
- ligertoolbar 动态加载按钮_Axure利用动态面板实现环形加载进度条
先来看下效果. 基本原理 上面是组合效果,主要包含三个部分,左半圆.右半圆和中间的百分加载部分.左.右半圆的实现原理很简单,就是利用动态面板的遮挡功能,将一个完整的圆遮挡一半,然后在显示的那一半上面添 ...
- extjs6.0 动态加载_Extjs入门之动态加载树代码
Extjs动态加载树的实现代码,需要的朋友可以参考下. Extjs动态加载树,首先在数据库里面设计存放树信息的表 USE [KimiExtjs] GO /****** 对象: Table [dbo]. ...
- java 动态加载控件_JS动态添加节点后渲染为EasyUI控件,EasyUI动态渲染解析解决方案...
这是个小菜在实际工作中遇到的问题,相信很多EasyUI新手很可能也遇到这样的问题,因此小菜觉得有必要拿出来分享一下. 这个问题要从EasyUI的datebox组件说起,小菜用这个组件的时候,发现用$( ...
- h5select动态加载数据_HTML5+中动态构建列表并填充数据
部分代码参考demo----<历史上的今天>. 感谢作者的分享,愿好人一生平安,虽然只有两个页面,但是通过这个示例让我学会了5+中如何动态构建列表并填充数据,非常实用. html部分: 历 ...
- GraphView与TreeView等本质关系区别;左侧tree树形列表点击,右侧区域动态加载图纸分割布局动态可拖动中间分隔线
数据可视化前端开发应用体验 GraphView跟TreeView是平级的组件!不是基类.派生关系!一个是拓扑图元组件.一个是树形组件,所有View类型的组件都是视图,用来设置数据模型DataModel ...
- mysql动态加载数据库数据库_Mysql动态更新数据库脚本的示例讲解
具体的upgrade脚本如下: 动态删除索引 DROP PROCEDURE IF EXISTS UPGRADE; DELIMITER $$ CREATE PROCEDURE UPGRADE() BEG ...
- android 动态加载sdk,LiteAVSDK集成,因此可以动态加载库
在Android开发中,Android Studio用于集成第三方SDK(例如,腾讯视频云移动直播,播放器,短视频以及实时音频和视频). 通常有两种集成方法: aar集成和jar + so集成. An ...
- Vue + Spring Boot 项目实战(十五):动态加载后台菜单
重要链接: 「系列文章目录」 「项目源码(GitHub)」 本篇目录 前言 一.后端实现 1.表设计 2.pojo 3.菜单查询接口(树结构查询) 二.前端实现 1.后台页面设计 2.数据处理 3.添 ...
最新文章
- 脂肪肝,应该拿你怎么办
- ASP入门(十三)-Server对象
- 计算机更改家庭组密码,Win10系统怎么修改家庭组密码 win10修改家庭组密码的方法...
- 【Boost】boost库asio详解4——deadline_timer使用说明
- android 最新消息滚动,Android 滚动操作Scroller类详解
- C# 跨线程调用控件
- HDU 3590 PP and QQ(反nim博弈,删边游戏)
- Spring MVC遭遇checkbox的问题解决方案
- JavaEE中使用绝对目录的说明
- java bean状态_无状态和有状态的企业Java Bean
- python辗转相除法最大公约数和最小公倍数_小灰算法(二): 可能是小学老师没教你的最大公约数算法...
- 此次边路调整系统推荐射手走哪路_王者荣耀:射手调整前瞻,阿离回归边路!新英雄/皮肤下周上架...
- ActiveMQ(四)——异步发消息、异步消费消息与prefetchSize之间的关系
- 电气原理图制图相关GB标准
- 上海自考02290 c++语言程序设计试卷,上海交通大学工业自动化专业自考本科招生简章...
- USB composite 设计
- 【web前端】第二天-HTML标签(下)
- SNN综述(2):生物可解释的脉冲神经网络
- acdream 1201 SuSu's Power dp
- java http心跳_MQTT协议笔记之连接和心跳
热门文章
- Android studio 导入jar 文件
- 【剑指Offer】23、二叉搜索树的后序遍历序列
- 关于HttpClient上传中文乱码的解决办法
- 杨老师课堂_Java核心技术下之控制台模拟文件管理器案例
- 具体解释可变參数列表
- 练习用基础SQL语句
- bzoj1095: [ZJOI2007]Hide 捉迷藏 线段树维护括号序列 点分治 链分治
- java.lang.Thread使用及总结
- Ubantu下hadoop运行第一个例子wordcount过程
- : error c2062: 意外的类型“int”_Go 命令行解析 flag 包之扩展新类型