简单的多级链接选择下拉框

今天我们要分享一个非常实用的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;

}



代码很简单,我这里没有太多的说明,朋友们自己预览的效果多么简单大方,非常实用。