189 8069 5689
给你一个JQ的三级联动：
创新互联公司专业为企业提供望江网站建设、望江做网站、望江网站设计、望江网站制作等企业网站建设、网页设计与制作、望江企业网站模板建站服务，十多年望江做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
!doctype html
html
head
title/title
meta charset = "utf-8"/
/head
style
/style
body
select id="one"
option value=""请选择省份/option
/select
select id="two"
option value=""请选择城市/option
/select
select id="three"
option value=""请选择区域/option
/select
script type="text/javascript" src="js/jquery-1.12.0.js"/script
script type="text/javascript"
/*
1.搭建框架
2.给省份和城市绑定change事件
*/
$(function(){
var province = [
{"name" : "广东省" ,
"city" : [
{
"name" : "广州市" ,
"area" : ["越秀区","荔湾区","海珠区","天河区,白云区"]
},
{
"name" : "深圳市" ,
"area" : ["福田区","罗湖区","南山区","宝安区","龙岗区"]
}
]
},
{"name" : "浙江省" ,
"city" : [
{
"name" : "杭州市" ,
"area" : ["上城区","下城区","江干区","西湖区"]
},
{
"name" : "丽水" ,
"area" : ["莲都区","松阳县","遂昌县","云和县"]
}
]
},
{"name" : "江西省" ,
"city" : [
{
"name" : "南昌市" ,
"area" : ["东湖区","西湖区","青云谱区","湾里区"]
},
{
"name" : "九江市" ,
"area" : ["浔阳区","庐山区","瑞昌市","九江县"]
},
{
"name" : "赣州市" ,
"area" : ["章贡区","南康区","上犹县","赣县"]
}
]
},
];
// 二级联动
$("#two").change(function(){
var one_index = $("#one option:selected").index();
var two_index = $("#two option:selected").index();
var three = $("#three");
three.empty().append("option请选择区域/option");
if(two_index 0){
var area = province[one_index-1].city[two_index-1].area;
for(var i = 0 ; i area.length ; i++){
three.append("option"+area[i]+"/option");
}
}
});
// 一级联动
$("#one").change(function(){
var one_index = $("#one option:selected").index();
var two = $("#two");
console.log(one_index)
two.empty().append("option请选择城市/option");
$("#three").empty().append("option请选择区域/option");//清除
if(one_index 0){
var city = province[one_index-1].city;
console.log(province[one_index-1].city)
for(var i = 0 ; i city.length ; i++){
two.append("option"+city[i].name+"/option");
}
}
});
init();
function init(){
for(var i = 0 ; i province.length ; i++){
$("#one").append("option"+province[i].name+"/option");
}
}
});
/script
/body
/html
很简单的滚动样式：
div.scroll{
scrollbar-arrow-color: #326BAB; /*三角箭头的颜色*/
scrollbar-face-color: #CAEAFC; /*立体滚动条的颜色*/
scrollbar-3dlight-color: #98D1F5; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: #CAEAFC; /*滚动条空白部分的颜色*/
scrollbar-shadow-color: #98D1F5; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #CAEAFC; /*立体滚动条强阴影的颜色*/
scrollbar-track-color: #C9E1F9; /*立体滚动条背景颜色*/
scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/
}
够详细了吧
如果你要很个性化的样式，就用jQuery的滚动条插件吧
这里有一个js的多级联动下拉菜单
可以自定义位置和样式 比较实用
里面有教程和源码
这里主要有以下几种方法：
一、在显示和隐藏的时候，可以设置显示隐藏的时间，$("#id").show("500")和$("#id").hide("500")，这样看上去有一个过渡的效果。
二、在菜单（尤其的联动菜单时）的下拉和收起时，使用$("#id").slideDown("500")和slideUp("500")，可以设置时间的长短。
三、一般的动画过渡用$("#id").animate()这个方法。如楼上的animate(({
opacity
:
"0.3"
},500)。
希望可以绑到你！