wyr123789
- 浏览: 38227 次
- 性别:
-
文章分类
- 全部博客 (57)
- Java 面试 (1)
- html5 (12)
- FQA (1)
- 前端 (18)
- java (1)
- css (7)
- 前端，js，jquery (8)
- html (2)
- jquery，html5，html (2)
- css3 (1)
- 仅包括这些 (0)
- 前端，js，jquery 有效的实时监听input (1)
- esayui (2)
- echarts3 (0)
- from (1)
- linxu (1)
- linxu apr (1)
- jsonp (1)
- 冒泡事件 (1)
- IOS click延迟300秒，ios长按点击事件会有copy的选项 (1)
- js (1)
- vue (1)
- webpack3 (1)
- sass (1)
- node (1)
最新评论
<!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>
<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>
分享到：
发表评论
-
vue 倒计时
2019-07-17 17:16 0time: 59, timer: nu ... -
input 特殊处理禁止输入特殊符号或者限制输入中文
2018-06-07 14:46 0<input class="js_input ... -
调用百度的搜索引擎
2017-09-28 11:26 0<!DOCTYPE html> <html& ... -
移动端碰到的坑
2017-09-22 15:34 695不废话 直接上代码： *{ -webkit-touch- ... -
移动端网页布局注意事项及解决
2017-08-01 17:10 11841.winphone系统a、input标签被点击时产生的半透明 ... -
全选反选
2017-05-09 18:34 481<div class="js_mobile&q ... -
js 规格多选，选中显示和还可以选择的数量 多维度选择
2017-03-17 16:09 1080<body> <section class= ... -
发送验证码
2017-03-15 15:54 0<input type="button&quo ... -
common css公共
2020-05-06 11:35 356/*遮罩层*/ .shadow{ position: fixe ... -
下拉列表功能获取数据添加到select表中
2017-03-14 15:41 782<!DOCTYPE html > <html ... -
图片轮播
2017-03-09 15:56 0<!DOCTYPE html> <html ... -
功能:H5可根据输入的匹配相对应的文字下拉框
2016-08-29 15:24 595<!DOCTYPE html> <html& ... -
功能 交替显示
2016-08-24 16:09 594<!DOCTYPE html> <html& ... -
纯CSS+CSS3右上角倾斜四十五度封页角效果
2016-08-16 17:07 4549加广告与加封页脚的代码是差不多的！ 以前封页脚都是图片现在 ... -
图形笑脸 增加动画
2016-07-21 15:23 581<!DOCTYPE html> <html& ... -
小用例
2016-07-20 17:24 371<!DOCTYPE html> <html& ... -
mui框架 上拉加载 下拉刷新
2016-07-15 15:38 724<!DOCTYPE html> <html& ... -
hcharts视图报表
2016-05-03 14:48 566function queryloginUser() { ... -
图形验证码
2015-11-05 18:12 454这是java代码！ 如若使用tomcat容器启动项目则需要加上 ... -
图形验证码
2015-11-05 18:12 463这是java代码！ 如若使用tomcat容器启动项目则需要加上 ...
相关推荐
在IT行业中，尤其是在前端开发领域，"两级联动菜单"是一个常见的设计模式，它主要用于网站或应用的导航系统，提供简洁且高效的用户交互...通过学习这些文件，可以进一步了解如何在实际项目中实现两级联动菜单的功能。
二级联动菜单通常由两个关联的下拉菜单组成，其中一个菜单的选择会影响另一个菜单的内容。这种交互设计可以帮助用户更高效地浏览和选择深层次的信息结构。 在这个"二级联动菜单示例代码"中，我们可以期待找到实现这...
在网页设计中，二级联动菜单是一种常见的交互设计模式，它主要用于地区选择、分类导航等场景。"asp无刷新二级联动菜单"是指使用ASP（Active Server Pages）技术实现的，在用户选择一级菜单时，二级菜单无需刷新整个...
下面将详细介绍这种二级联动菜单的实现原理、步骤以及相关的jQuery知识。 首先，联动菜单的基本概念是：当用户在一个下拉菜单（一级菜单）中选择某个选项时，另一个下拉菜单（二级菜单）的内容会根据所选的选项动态...
在“ElementUI三级联动菜单代码”中，我们主要关注的是一个特定的功能实现，即省市区三级联动菜单。这个功能在很多web应用中都非常常见，特别是在涉及到地址选择或者地理位置相关操作时。 首先，我们要理解什么是三...
通过查看和分析这两个文件，我们可以进一步了解这个三级联动菜单的具体实现细节。 总的来说，JS编写的三级联动菜单是一个典型的前端交互案例，它展示了JS在动态数据处理和用户界面控制方面的强大能力。理解并掌握...
在IT领域，二级联动菜单是一种常见的用户界面设计模式，它用于提供更为精细化的筛选或选择功能。在这种菜单中，选择一级菜单的一项会触发二级菜单的显示，二级菜单中的选项通常与一级菜单的选择有关联。这样的设计...
开发者可以利用其强大的代码编辑、调试和项目管理功能来快速构建Web应用，而这个二级联动菜单可能就是其中一个示例或插件。由于提到“很好用”，我们可以推断这个菜单在用户体验和性能方面有良好的表现。 【标签】...
在无限级联动菜单中，每一级菜单都可以有任意数量的子菜单，直到达到用户的设定或数据的尽头。 在给定的代码中，可以看到一个名为`Menu`的JavaScript函数，这个函数是实现无限级联动的核心。它接受两个参数：`the...
本文将详细解析如何使用纯JSP（JavaServer Pages）技术实现一个3级联动菜单，并探讨相关知识点。 首先，我们要理解什么是3级联动菜单。在网页中，联动菜单通常指的是当用户在一个下拉菜单中选择一个选项时，另一个...
2. 多级联动：对于拥有更多层级的地区，如区县，可以扩展为三级甚至四级联动菜单。 3. 动态渲染：利用模板引擎，如ejs或handlebars，可以更方便地生成HTML选项。 4. 错误处理：添加错误处理机制，如未选择省份时不...
“二级联动菜单”是指在一个下拉菜单中，当用户选择一个选项时，会触发另一个下拉菜单的显示，这两个下拉菜单之间存在关联关系。这种效果通常用JavaScript、jQuery或CSS实现，但在Dreamweaver中，通过插件可以简化这...
在这个“二级联动菜单（jsp mysql）”的实例中，我们将探讨如何使用JavaServer Pages (JSP) 和 MySQL数据库来实现这种功能。 首先，JSP是Java的一种动态网页技术，它允许开发人员在HTML页面中嵌入Java代码，从而...
【Ajax四级联动菜单】是一种基于Ajax技术实现的动态下拉菜单功能，通常用于网页上的地区选择，例如国家、省份、城市、区县等。在这个示例中，它使用了Oracle数据库存储四级菜单的数据，并结合JSP（JavaServer Pages...
在网页开发中，二级联动菜单通常用于导航或数据筛选，为用户提供更为直观和便捷的操作体验。Ajax（Asynchronous JavaScript and XML）技术在此场景下发挥着关键作用，它允许页面不刷新即可更新部分内容，大大提升了...
在这个"Android例子源码省市区3级联动菜单和数据库"项目中，开发者提供了实现这一功能的具体示例，同时结合了数据库存储全国的省市区数据。 首先，让我们关注这个项目的两个主要显示方式：PopWindow和Fragment。...
在IT行业中，"两级联动"通常指的是在一个界面上有两个下拉菜单，它们之间存在关联关系。当用户在第一个下拉菜单（一级菜单）选择一个选项时，第二个下拉菜单（二级菜单）的内容会根据一级菜单的选择动态更新。这种...
Ajax三级联动菜单是一种常见的前端交互设计，常用于网站的数据筛选或导航，比如在课程选择、商品分类等场景中。在这个项目中，我们看到涉及到“学院”、“专业”和“班级”三张表的关联，这通常意味着用户在选择时，...
在本案例中，二级联动菜单主要分为两部分： 1. **一级菜单**：通过ASP查询数据库获取数据，并将其填充到HTML的`<select>`元素中。 2. **二级菜单**：当用户在一级菜单中选择某项后，通过JavaScript根据所选值从预定...
这个压缩包“jQuery三级联动菜单选择器代码.zip”包含了一个使用jQuery实现的三级联动菜单的代码示例，它能帮助开发者创建功能丰富的导航菜单，提高用户在网站上的导航体验。 首先，我们要理解什么是jQuery。jQuery...