功能两级联动菜单

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>两级联动菜单</title>
<link rel="stylesheet" type="text/css" href="../css/v3.0/css/style-lh.css"/>
<link rel="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: solid 1px #000;

/*很关键：将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;

/*在选择框的最右侧中间显示小箭头图片*/
background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;

/*为下拉小箭头留出一点位置，避免被文字覆盖*/
padding-right: 14px;
}

/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }
}
</style>
</style>
<body>
<div>
    <select name="music" class="js_music" onclick="querysel()" >
<option value="0">伤感</option>
    <option value="1">dj</option>
    <option value="2">搞笑</option>
    <option value="3">无厘头</option>
    <option value="4">表白</option>
    </select>
    <select name="" class="js_musicsel">                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     ">
    </select>
</div>
</body>
<script type="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(){
});
function querysel(){
var name = "女人花";
var num = 1;
var list = ['你是我心爱的姑娘','喜欢你','吻别','皇后大道东','情人'];
var list1 =[{"musicname":"name","musicnum":"女人花"}];
var optione;
var optione1;
$(".js_music").on("click",function(){
var js_music = $(".js_music option:selected");
if(js_music.val()=="0"){
$(".js_musicsel").html("");
$.each(list,function(n,value) {
optione += "<option value='"+n+"'>"+value+"</option>";
$(".js_musicsel").html(optione);
console.log($(".js_musicsel").val());
})
return;
}else if(js_music.val()=="1"){
$(".js_musicsel").html("");
var htmloption1 = "<option value='0'>你是我心爱的姑娘dj</option>";
htmloption1 += "<option value='1'>喜欢你dj</option>";
htmloption1 += "<option value='2'>吻别dj</option>";
htmloption1 += "<option value='3'>皇后大道东dj</option>";
htmloption1 += "<option value='4'>情人dj</option>";
$(".js_musicsel").html(htmloption1);
return;
}else if(js_music.val()=="2"){
$(".js_musicsel").html("");
$.each(list1,function(n, value) {
if(value!=null||value!=undefined||value!=""){
optione1 += "<option value='"+value.musicname+"'>"+value.musicnum+"</option>";
$(".js_musicsel").html(optione1);
}
return true;
})

}

});
}

</script>
</html>

功能 两级联动菜单

猜你喜欢

功能两级联动菜单