功能 两级联动菜单
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<title>两级联动菜单</title>
<linkrel="stylesheet"type="text/css"href="../css/v3.0/css/style-lh.css"/>
<linkrel="stylesheet"type="text/css"href="../css/v3.0/css/public-lh.css"/>
</head>
<style>
body{margin:0;padding:0;position:relative;}
select{
/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
border:solid1px#000;
/*很关键：将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*在选择框的最右侧中间显示小箭头图片*/
background:url("http://ourjs.github.io/static/2015/arrow.png")no-repeatscrollrightcentertransparent;
/*为下拉小箭头留出一点位置，避免被文字覆盖*/
padding-right:14px;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand{display:none;}
}
</style>
</style>
<body>
<div>
<selectname="music"class="js_music"onclick="querysel()">
<optionvalue="0">伤感</option>
<optionvalue="1">dj</option>
<optionvalue="2">搞笑</option>
<optionvalue="3">无厘头</option>
<optionvalue="4">表白</option>
</select>
<selectname=""class="js_musicsel">">
</select>
</div>
</body>
<scripttype="text/javascript"src="../js/v3.0/js/jquery-1.7.2.min.js"></script>
<script>
//.append(i);在元素值后面追加
//queryarryl.find("a");返回queryarryl下所有子元素为a的；
//on()添加事件；
//index(this);返回当前元素的下标
//queryi.eq(index).removeClass("active").hide();根据index返回的下标删除class样式并隐藏
$(function(){
});
functionquerysel(){
varname="女人花";
varnum=1;
varlist=['你是我心爱的姑娘','喜欢你','吻别','皇后大道东','情人'];
varlist1=[{"musicname":"name","musicnum":"女人花"}];
varoptione;
varoptione1;
$(".js_music").on("click",function(){
varjs_music=$(".js_musicoption:selected");
if(js_music.val()=="0"){
$(".js_musicsel").html("");
$.each(list,function(n,value){
optione+="<optionvalue='"+n+"'>"+value+"</option>";
$(".js_musicsel").html(optione);
console.log($(".js_musicsel").val());
})
return;
}elseif(js_music.val()=="1"){
$(".js_musicsel").html("");
varhtmloption1="<optionvalue='0'>你是我心爱的姑娘dj</option>";
htmloption1+="<optionvalue='1'>喜欢你dj</option>";
htmloption1+="<optionvalue='2'>吻别dj</option>";
htmloption1+="<optionvalue='3'>皇后大道东dj</option>";
htmloption1+="<optionvalue='4'>情人dj</option>";
$(".js_musicsel").html(htmloption1);
return;
}elseif(js_music.val()=="2"){
$(".js_musicsel").html("");
$.each(list1,function(n,value){
if(value!=null||value!=undefined||value!=""){
optione1+="<optionvalue='"+value.musicname+"'>"+value.musicnum+"</option>";
$(".js_musicsel").html(optione1);
}
returntrue;
})
}
});
}
</script>
</html>