简单的多级链接选择下拉框
今天我们要分享一个非常实用的jQuery插件,它是一个jQuery下拉选择省份的多级联动框架的基础上,而值得一提的是,这种联动下拉框是通过自定义的美化,浏览器是美丽的外表比很多。此外,选择下拉框也可以绑定下拉事件得到当前选定项的值。HTML代码:
复制代码代码如下所示:
湖北省
广东省
湖南省
四川省
武汉市
深圳市
长沙市
成都市
蔡甸区
南山区
雨花区
武侯区
($单击)(函数(e){)
($ {名称=不错的选择,找到)('ul ')(隐藏);
$(这)找到('ul)显示();
e.stoppropagation();
});
$(Hover(函数(e){)
$(这)ToggleClass(开);
e.stoppropagation();
});
$(Click(函数(e){)
var = $(this);
无功dataval =美元(这)。Attr(值);
$(这)。父母({姓名=不错的选择,找到)(输入的)。瓦迩(Val);
$()选择;
e.stoppropagation();
警报(中文值是:+瓦尔);
警报(数字值是:+ dataval);
/ /警报($(this)。父母({姓名=不错的选择,找到)(输入的)(瓦迩));
});
$(文档)Click(函数(){)
$()选择;
});
CSS代码:
复制代码代码如下所示:
体
{
颜色:# 555;
字体大小:14px;
字体微软雅黑
背景颜色:# Eee;
}
一
{
颜色:# 555;
}
答:悬停
{
颜色:# F00;
}
输入
{
字体大小:14px;
字体微软雅黑
}
。包
{
宽度:500px;
保证金:100px汽车;
}
H20。
{
身高:20px;
溢出:隐藏;
清楚:两者;
}
很好的选择。
{
宽度:245px;
填充物:0 10px;
身高:38px;
边境:1px solid # 999;
职位:相对;
盒子的影子:00 5px # 999;
背景:# FFF URL(图像/ A2。JPG)没有重复的权利中心;
光标:指针;
}
很好的选择输入
{
显示块;
宽度:100%;
身高:38px;
行高:38px 9;
边界:0;
大纲:0;
背景:无;
光标:指针;
}
好选择UL。
{
宽度:100%;
显示:无;
位置:绝对;
左:- 1px;
上图:38px;
溢出:隐藏;
背景颜色:# FFF;
马克斯身高:150px;
overflow-y:汽车;
边境:1px solid # 999;
边界顶部:0;
盒子的影子:0 3px 5px # 999;
Z指数:9999;
}
尼斯精选UL Li
{
身高:30px;
行高:30px;
溢出:隐藏;
Padding: 0 10px;
光标:指针;
}
UL li.on好选择。
{
背景颜色:# e0e0e0;
}
代码很简单,我这里没有太多的说明,朋友们自己预览的效果多么简单大方,非常实用。