jQuery version: 1.8.3
说明：分析其他网站的图片较多，可以在目录跳过直接看本文
目录： & & & &
　■&&& & &
　■　&& & &&
　■　&& & &&
　■　&& & &&
　■　demo3&[ 后面的博文再写 ]
惯例，先看看他山之石，选择了四家比较大的电商网站：亚马逊、淘宝、京东、当当，看看它们的地址联动菜单是怎么做的。
1. 亚马逊【】【】
图1 默认界面
说明：只能选择第一级菜单，二三级为灰色不可用
图2 点击第一级菜单
说明：这种下拉方式我第一次真正注意到，平时也许用到过但是没有察觉。我感觉这种方式体验相对于传统下拉菜单非常好，对于数据量不多的数据可以采用这种方式，对于数据量稍大的数据，也许能做成 ajax 翻页的形式，不过我没有见过。此时后两级菜单仍然不可用。下拉数据的格式是 n 行 4 列。
图3.&选择一个直辖市，比如北京
说明：直辖市"北京"的第二级菜单默认自动选择了北京，而且用户不能修改；第三级菜单"区县"自动展现。选择完这一级就完成了填写工作。
直辖市的添加用了 3 步 ( 鼠标点击 3 次 )，当然详细街道地址得用户手动填写。
下面看看普通省份。
图4. 选择一个普通省份
截图省略了几个步骤。它比选择直辖市多了一个选择二级地级市的步骤 ( 4步 )，其他都一样。
2. 淘宝&【】【】
图1. 默认显示界面
说明：固定两级联动菜单，第一级是选择国内国外，第二级是选择城市 ( 所有的省市区县都包含在这一级的下拉菜单中 )。
图2.点击"请选择城市"
说明：和亚马逊一样，下拉出现的是一个面板，不同的是它这个是个 tab 面板，省、市、县包括街道这四级都包含在这里面了，默认显示省份，所有的省份按首字首拼进行分类和排列。
图3. 选择一个直辖市比如北京
说明：直接显示 tab 面板的"县区"。
图4.选择"县区"，比如朝阳，显示"街道"。加上选择街道，用户需要点击 4 步。
图5.此时如果反过来点击"城市"，显示
图6.如果反过来点击"省份"，则显示"北京"高亮的面板
图7.再选择普通省份，比如选择排第一行的"福建"
说明：默认跳转至"城市"面板
淘宝的地址填写到此结束。
相比亚马逊，我更喜欢淘宝的设计。
总结一：这两个网站的联动菜单都没有使用传统的下拉框，实际上它们都没有使用 html 的 &select&&/select&标签，优点在于：1.不需要用户额外再去点击下级菜单来展开选择项；2.不需要用户拖动下拉菜单的竖直滚动条；3.大多数情况下用户不用太多的视觉跨越就能找到自己需要的选项。
再来看看另两家使用传统选择列表的电商网站：京东和当当。
3.京东&【】【】
图1.默认界面
说明：默认三级联动
图2.点击第一级下拉
图3.选择一个直辖市：北京
图4. 选择第二级菜单
图6. 继续选择
说明：直辖市选择结束。用户需要6步。
再看看普通省份，比如河北。图7
图8，选择石家庄
图9.选择晋州
说明：此时动态添加了第四级菜单
图10.继续选择
说明：普通省份选择结束。用户共需要点击8次。
4.最后看看当当网&【】【】
图1.默认界面
图3.选择一个直辖市北京
说明：此步设计我认为是一个败笔，当选择第一级栏目为北京时，第二级栏目应该固定为北京或者直接显示北京的各个区，而不是让用户进行一个完全多余的一个行为。
图4.在第三级栏目中选择北京
图5.继续选择
图5.选择结束
说明：用户进行了 6 步。
总结二. 使用传统的下拉选择菜单，用户在选择时可能会使用下拉的滚动条，这增加了用户的操作；而且用户的视觉跨度( 自上而下 ) 往往更大。站在用户的角度，我更青睐前两家网站的设计方式。
=======================================华丽的分割线=======================================
现在自己设计省市的多级联动菜单，分别设计 3 种类型：&【】【】
2.仿亚马逊的下拉面板 [ 后面的博文写 ]
3.仿淘宝的 tab 面板 [ 后面的博文写 ]
数据库分为 4 张表：province，city，area，street，分别表示省份、城市、区县和街道，其中前三张表的数据时完整的，街道表中只有一条测试数据，用来测试动态添加级联菜单。
表的结构如下
mysql&+------------+-------------+------+-----+---------+----------------+| Field
| Null | Key | Default | Extra
|+------------+-------------+------+-----+---------+----------------+| id
| PRI | NULL
| auto_increment || provinceID | varchar(6)
|| province
| varchar(40) | YES
|+------------+-------------+------+-----+---------+----------------+
mysql&+--------+-------------+------+-----+---------+----------------+| Field
| Null | Key | Default | Extra
|+--------+-------------+------+-----+---------+----------------+| id
| PRI | NULL
| auto_increment || cityID | varchar(9)
| varchar(50) | YES
|| father | varchar(6)
|+--------+-------------+------+-----+---------+----------------+
mysql&+--------+-------------+------+-----+---------+----------------+| Field
| Null | Key | Default | Extra
|+--------+-------------+------+-----+---------+----------------+| id
| PRI | NULL
| auto_increment || areaID | varchar(50) | YES
| varchar(60) | YES
|| father | varchar(6)
|+--------+-------------+------+-----+---------+----------------+
mysql&+----------+-------------+------+-----+---------+----------------+| Field
| Null | Key | Default | Extra
|+----------+-------------+------+-----+---------+----------------+| id
| PRI | NULL
| auto_increment || streetID | varchar(9)
| varchar(40) | YES
| varchar(6)
|+----------+-------------+------+-----+---------+----------------+
一. 传统的下拉菜单&【】
设计思路：
默认显示的是三级下拉菜单：省份、城市、县区，只有选择数据表中含有街道数据的区县才会显示第四级菜单，demo 完整的效果图如下：
图1. 默认显示三级下拉菜单
图2. 当区县含有街道信息时，动态加载第四级菜单
(1) 首先当页面加载时，同时使用 ajax 加载省份菜单，另外两级菜单不可用，代码：
addr.hrml html 部分代码片段：
&form id="select-form" action="addr.php" method="post"&
&!-- 第一级 省份 --&
&select id="province"&
&option&选择省份&/option&
&!-- 第一级 城市 初始状态不可用 --&
&select id="city" disabled&
&option&选择城市&/option&
&!-- 第一级 区县 初始状态不可用 --&
&select id="area" disabled&
&option&选择区县&/option&
&!-- 隐藏域 --&
&input type="hidden" id="pid" name="pid"&
&input type="hidden" id="p" name="p"&
&input type="hidden" id="cid" name="cid"&
&input type="hidden" id="c" name="c"&
&input type="hidden" id="aid" name="aid"&
&input type="hidden" id="a" name="a"&
&input id="sub" type="submit" value="提交"&
&/form&&br&
&!-- 显示选择的结果 --&
省份：&{$pid}& - &{$p}&&br&
城市：&{$cid}& - &{$c}&&br&
区县：&{$aid}& - &{$a}&&br&
&{if $sid && $s }&
街道：&{$sid}& - &{$s}&
addr.html js 部分代码片段
$(function(){
//ajax方式加载第一级菜单 - 省份
$.post("sel.php",{
},function(data,textStatus){
//接收json数据
var dataObj = eval("("+data+")"); //转换为json对象
$.each(dataObj,function(idx,item){
$option_new = $("&option value=\""+item.provinceID+"\"&"+item.province+"&/option&");
$option_new.insertAfter($("#province").children(":first"));
sel.php 代码片段：
//初始加载所有的省份信息
if($_POST['city']){
$sql = "select provinceID,province from province order by id desc";
if( $conne-&getRowsNum($sql) & 0 ){
$rows = $conne-&getRowsArray($sql);
//把二维数组转换成json格式
echo json_encode($rows);
(2) 当选择第一级菜单时，有两种情况：
一是第一次选择该菜单，需要对该级 select 标签下的 option 进行遍历，当select 的值 ( 选中的 ) 和 列表中&option 的值相等时，就把该option 添加上 selected 属性，同时把该 option 的 value 和 text 放入表单的隐藏域；
二是之前已经选择过该菜单，现在再次选择，则需要首先把下级 select 的子元素 ( 即 option ) 已经添加的 selected 属性去掉，同时下级 selected 全部不可用，下级菜单对应的隐藏域的值全部清空，在遍历时需要把没有最终选中的 option 的 selected 属性去掉。
当选择完省份之后，使用 ajax 加载 第二级的城市菜单，如果获取数据成功，则加载菜单；否则城市菜单不可用。代码如下：
addr.html js 部分代码片段：
1 //选择第一级菜单 - 省份
2 $("#province").bind("change",function(){
//第三级菜单 - 地区不可用
$(this).nextAll().children().removeAttr("selected");
$(this).siblings("select").attr("disabled",true);
//同时清除隐藏域
$("#cid").val("");
$("#c").val("");
$("#aid").val("");
$("#a").val("");
if($("#street").length & 0){
$("#street").remove();
$("#sid").val("");
$("#s").val("");
//遍历option
$(this).children().each(function(){
if($(this).val() == $(this).parent().val()){
//选中该条
$(this).attr("selected",true);
//把该条的id放入隐藏域
$("#pid").val($(this).val());
$("#p").val($(this).text());
//没有选中的去掉之前的selected
$(this).removeAttr("selected");
//选中省份之后，使用ajax获取第二季菜单 - 城市
$.post("sel.php",{
pid : $("#pid").val()
},function(data,textStatus){
//如果有返回值
//城市菜单可用
$("#city").attr("disabled",false);
//删除之前选择省份加载的城市
$("#city").children(":not(:first)").remove();
//接收json数据
var dataObj = eval("("+data+")"); //转换为json对象
$.each(dataObj,function(idx,item){
$option_new = $("&option value=\""+item.cityID+"\"&"+item.city+"&/option&");
$option_new.insertAfter($("#city").children(":first"));
//没有返回值，说明第一级菜单没有选中省份
//城市菜单恢复默认而且不可用
$("#city").children().removeAttr("selected");
$("#city").attr("disabled",true);
&sel.php 代码片段：
//当接收到post的pid，加载城市信息
if( isset($_POST['pid']) && $_POST['pid']!="选择省份" ){
$sql = "select cityID,city from city where father = ".$_POST['pid']." order by id desc";
if( $conne-&getRowsNum($sql) & 0 ){
$rows = $conne-&getRowsArray($sql);
//把二维数组转换成json格式
echo json_encode($rows);
其他各级的实现都与第一级的实现类似，最后是动态添加下拉菜单，如果 ajax 没有返回查询的数据，则说明没有该级菜单下没有下级菜单了，代码如下：
addr.html js 部分代码片段：
1 //选择第三级菜单 - 地区
2 $("#area").bind("change",function(){
if($("#street").length & 0){
$("#street").remove();
$("#sid").val("");
$("#s").val("");
//遍历option
$(this).children().each(function(){
if($(this).val() == $(this).parent().val()){
//排除第一条(即"请选择")
if( $(this).parent().val() !== $(this).parent().children(":first").val() ){
//选中该条
$(this).attr("selected",true);
//把该条的id和名称放入隐藏域
$("#aid").val($(this).val());
$("#a").val($(this).text());
//当是第一条时，把隐藏域的值清空，无法提交
$("#aid").val("");
$("#a").val("");
//没有选中的去掉之前的selected
$(this).removeAttr("selected");
//检测是否还有下一级
$.post("sel.php",{aid:$("#aid").val()},function(data,textStatus){
//如果有返回值
//动态添加下一级菜单
$street = $("&select id=\"street\"&&option&选择街道&/option&&/select&");
$street.insertAfter($("#area"));
//删除之前选择省份加载的街道
$("#street").children(":not(:first)").remove();
//接收json数据
var dataObj = eval("("+data+")"); //转换为json对象
$.each(dataObj,function(idx,item){
$option_new = $("&option value=\""+item.streetID+"\"&"+item.street+"&/option&");
$option_new.insertAfter($("#street").children(":first"));
//如果有第四级
if($("#street").length & 0){
$("#street").live("change",function(){
//清空隐藏域
$("#sid").remove();
$("#s").remove();
//遍历option
$(this).children().each(function(){
if($(this).val() == $(this).parent().val()){
//选中该条
$(this).attr("selected",true);
//添加隐藏域并把把该条的id放入隐藏域
$sid = $("&input type=\"hidden\" id=\"sid\" name=\"sid\"&");
$s = $("&input type=\"hidden\" id=\"s\" name=\"s\"&");
$sid.insertAfter($("#a"));
$s.insertAfter($("#sid"));
//排除第一条(即"请选择")
if( $(this).parent().val() !== $(this).parent().children(":first").val() ){
//选中该条
$(this).attr("selected",true);
//把该条的id和名称放入隐藏域
$("#sid").val($(this).val());
$("#s").val($(this).text());
//当是第一条时，把隐藏域的值清空，无法提交
$("#sid").val("");
$("#s").val("");
//没有选中的去掉之前的selected
$(this).removeAttr("selected");
//没有返回值，说明上一级菜单没有选中，删除第四级菜单
$("#street").children().removeAttr("selected");
$("#street").remove();
提交表单：
addr.html js 部分代码片段
1 //如果有一栏为空或者不可用，不允许提交
2 $("#sub").click(function(){
if($("#street").length == 0){
if($("#pid").val() == "" || $("#p").val() == "" || $("#cid").val() == "" || $("#c").val() == "" || $("#aid").val() == "" || $("#a").val() == "" || $("#city").attr("disabled") === true || $("#area").attr("disabled") === true){
alert("请完成选择");
return false;
if($("#pid").val() == "" || $("#p").val() == "" || $("#cid").val() == "" || $("#c").val() == "" || $("#aid").val() == "" || $("#a").val() == "" || $("#city").attr("disabled") === true || $("#area").attr("disabled") === true || $("#s").length == 0 || $("#s").val() == "" || $("#sid").length == 0 || $("#sid").val() == ""){
alert("请完成选择");
return false;
图1. 3 级联动
图2. 4 级联动
说明：作者写博目的是记录开发过程，积累经验，便于以后工作参考。如需转载，请在文章页面保留此说明并且给出原文链接。谢谢！
阅读(...) 评论() 上传我的文档
 下载
 收藏
该文档贡献者很忙，什么也没留下。
 下载此文档
正在努力加载中...
1 ICEM基本菜单功能介绍
下载积分：100
内容提示：1 ICEM基本菜单功能介绍
文档格式：PPT|
浏览次数：40|
上传日期： 13:53:54|
文档星级：
该用户还上传了这些文档
1 ICEM基本菜单功能介绍
官方公共微信远程桌面限制用户使用同一个会话
最近远程主机重装后，使用远程桌面出现一个问题：同一个用户先后登录远程系统，系统分配了不同会话。当系统分配不同会话时，导致你在一个远程桌面的操作都不见了。像是你运行的一些程序，虽然他们没有被系统关闭，但是你无法对他们进行管理。这就给你的管理带来极大的不便，文章将说明如何解决这个问题。这里以Windows Server 2008为例，其他系统只作参考。
如果将远程桌面会话主机服务器配置为限制用户只能进行一个会话，并且用户将该会话置于断开状态，用户下次连接到远程桌面会话主机服务器时，将自动重新连接到该会话。
目前有三种方式可以解决以上问题：使用远程桌面会话主机配置，或者组策略配置，或者修改注册表。
一、使用远程桌面会话主机配置
你的账号必须是远程主机&管理员&组成员身份，否则是没有系统权限的。
以下是远程桌面限制用户使用同一个会话的设置步骤：
1、打开&远程桌面会话主机配置&菜单：
要打开&远程桌面会话主机配置&，请单击&开始&，依次指向&管理工具&和&远程桌面服务&，然后单击&远程桌面会话主机配置&。
2、设置&限制每个用户只能进行一个会话&选项：
在&编辑设置&区域的&常规&下，双击&限制每个用户只能进行一个会话&。
在&属性&对话框的&常规&选项卡上，选中&限制每个用户只能进行一个会话&复选框，然后单击&确定&。
二、使用组策略配置
可以通过启用&限制远程桌面服务用户只能进行一个远程会话&组策略设置，限制用户在 远程桌面 会话主机服务器上只能进行一个会话。此组策略设置位于&计算机配置\策略\管理模板\Windows \远程桌面服务\远程桌面会话主机\连接&中，可以使用本地组策略编辑器或组策略管理控制台 (GPMC) 进行配置。注意了，此组策略设置将优先于远程桌面会话主机配置中配置的设置。
三、修改注册表
其实和第一种本质是一样的。
[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Terminal Server]
&fSingleSessionPerUser&=dword:
四、结束语
限制用户只能进行一个会话，还可以提高远程主机服务器的性能。通过限制用户在远程桌面会话主机服务器上只能进行一个会话，可以最大程度地减少创建的远程会话数。这样有助于节省远程桌面会话主机服务器上的系统资源，从而允许更多的用户连接到远程桌面会话主机服务器。
题外话，如果想实现一个账号多人登录多会话模式，防止被其他人踢出，根据上面的内容反操作即可。
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'