`

功能 两级联动菜单

阅读更多
<!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>
分享到:
评论

相关推荐

    两级联动菜单两级联动菜单

    在IT行业中,尤其是在前端开发领域,"两级联动菜单"是一个常见的设计模式,它主要用于网站或应用的导航系统,提供简洁且高效的用户交互...通过学习这些文件,可以进一步了解如何在实际项目中实现两级联动菜单的功能。

    二级联动菜单示例代码

    二级联动菜单通常由两个关联的下拉菜单组成,其中一个菜单的选择会影响另一个菜单的内容。这种交互设计可以帮助用户更高效地浏览和选择深层次的信息结构。 在这个"二级联动菜单示例代码"中,我们可以期待找到实现这...

    asp无刷新二级联动菜单

    在网页设计中,二级联动菜单是一种常见的交互设计模式,它主要用于地区选择、分类导航等场景。"asp无刷新二级联动菜单"是指使用ASP(Active Server Pages)技术实现的,在用户选择一级菜单时,二级菜单无需刷新整个...

    jquery select二级联动菜单

    下面将详细介绍这种二级联动菜单的实现原理、步骤以及相关的jQuery知识。 首先,联动菜单的基本概念是:当用户在一个下拉菜单(一级菜单)中选择某个选项时,另一个下拉菜单(二级菜单)的内容会根据所选的选项动态...

    ElementUI三级联动菜单代码

    在“ElementUI三级联动菜单代码”中,我们主要关注的是一个特定的功能实现,即省市区三级联动菜单。这个功能在很多web应用中都非常常见,特别是在涉及到地址选择或者地理位置相关操作时。 首先,我们要理解什么是三...

    JS写的三级联动菜单

    通过查看和分析这两个文件,我们可以进一步了解这个三级联动菜单的具体实现细节。 总的来说,JS编写的三级联动菜单是一个典型的前端交互案例,它展示了JS在动态数据处理和用户界面控制方面的强大能力。理解并掌握...

    二级联动菜单 超强超简单的数据库(附数据库)

    在IT领域,二级联动菜单是一种常见的用户界面设计模式,它用于提供更为精细化的筛选或选择功能。在这种菜单中,选择一级菜单的一项会触发二级菜单的显示,二级菜单中的选项通常与一级菜单的选择有关联。这样的设计...

    二级联动菜单

    开发者可以利用其强大的代码编辑、调试和项目管理功能来快速构建Web应用,而这个二级联动菜单可能就是其中一个示例或插件。由于提到“很好用”,我们可以推断这个菜单在用户体验和性能方面有良好的表现。 【标签】...

    无限级联动菜单-JavaScript版 .doc

    在无限级联动菜单中,每一级菜单都可以有任意数量的子菜单,直到达到用户的设定或数据的尽头。 在给定的代码中,可以看到一个名为`Menu`的JavaScript函数,这个函数是实现无限级联动的核心。它接受两个参数:`the...

    纯jsp实现3级联动菜单

    本文将详细解析如何使用纯JSP(JavaServer Pages)技术实现一个3级联动菜单,并探讨相关知识点。 首先,我们要理解什么是3级联动菜单。在网页中,联动菜单通常指的是当用户在一个下拉菜单中选择一个选项时,另一个...

    JS城市联动菜单.rar

    2. 多级联动:对于拥有更多层级的地区,如区县,可以扩展为三级甚至四级联动菜单。 3. 动态渲染:利用模板引擎,如ejs或handlebars,可以更方便地生成HTML选项。 4. 错误处理:添加错误处理机制,如未选择省份时不...

    dreamweaver插件-二级联动菜单

    “二级联动菜单”是指在一个下拉菜单中,当用户选择一个选项时,会触发另一个下拉菜单的显示,这两个下拉菜单之间存在关联关系。这种效果通常用JavaScript、jQuery或CSS实现,但在Dreamweaver中,通过插件可以简化这...

    二级联动菜单(jsp mysql)

    在这个“二级联动菜单(jsp mysql)”的实例中,我们将探讨如何使用JavaServer Pages (JSP) 和 MySQL数据库来实现这种功能。 首先,JSP是Java的一种动态网页技术,它允许开发人员在HTML页面中嵌入Java代码,从而...

    ajax四级联动菜单

    【Ajax四级联动菜单】是一种基于Ajax技术实现的动态下拉菜单功能,通常用于网页上的地区选择,例如国家、省份、城市、区县等。在这个示例中,它使用了Oracle数据库存储四级菜单的数据,并结合JSP(JavaServer Pages...

    ajax二级联动菜单

    在网页开发中,二级联动菜单通常用于导航或数据筛选,为用户提供更为直观和便捷的操作体验。Ajax(Asynchronous JavaScript and XML)技术在此场景下发挥着关键作用,它允许页面不刷新即可更新部分内容,大大提升了...

    Android例子源码省市区3级联动菜单和数据库.zip

    在这个"Android例子源码省市区3级联动菜单和数据库"项目中,开发者提供了实现这一功能的具体示例,同时结合了数据库存储全国的省市区数据。 首先,让我们关注这个项目的两个主要显示方式:PopWindow和Fragment。...

    Java代码实现两级联动

    在IT行业中,"两级联动"通常指的是在一个界面上有两个下拉菜单,它们之间存在关联关系。当用户在第一个下拉菜单(一级菜单)选择一个选项时,第二个下拉菜单(二级菜单)的内容会根据一级菜单的选择动态更新。这种...

    Ajax三级联动菜单

    Ajax三级联动菜单是一种常见的前端交互设计,常用于网站的数据筛选或导航,比如在课程选择、商品分类等场景中。在这个项目中,我们看到涉及到“学院”、“专业”和“班级”三张表的关联,这通常意味着用户在选择时,...

    JS+ASP二级联动菜单

    在本案例中,二级联动菜单主要分为两部分: 1. **一级菜单**:通过ASP查询数据库获取数据,并将其填充到HTML的`&lt;select&gt;`元素中。 2. **二级菜单**:当用户在一级菜单中选择某项后,通过JavaScript根据所选值从预定...

    jQuery三级联动菜单选择器代码.zip

    这个压缩包“jQuery三级联动菜单选择器代码.zip”包含了一个使用jQuery实现的三级联动菜单的代码示例,它能帮助开发者创建功能丰富的导航菜单,提高用户在网站上的导航体验。 首先,我们要理解什么是jQuery。jQuery...

Global site tag (gtag.js) - Google Analytics