<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<select name="channel" id="channel" onChange="getVal(this.options[this.selectedIndex].value)">
<option value="请选择">-请选择-</option>
<option value="即使互动">即使互动</option>
<option value="光影无限">光影无限</option>
<option value="乐客渠道">乐客渠道</option>
</select>
<select name="retailer" id="retailer">
<option>-请选择-</option>
</select>
</body>
<script>
//onChange="getVal(this.options[this.selectedIndex].value)"
//利用onChange事件，来获取当前选项的value
//通过this.options拿到当前select的所有option选项
//通过this.selectedIndex拿到被选选项的索引号
//这样就能拿到每次选项的value值，然后再用数据进行匹配，拿到该选项的相应的数据，并填充到下一个select//定义数据Array＝[["value","数据1|数据2｜数据3"],["value","数据1|数据2｜数据3"]]。
//定义数据里的value与你option里的value一致
var valArray = [["即使互动","即使互动1|即使互动2|即使互动3|即使互动4"],["光影无限","光影无限1|光影无限2|光影无限3|光影无限4"],["乐客渠道","乐客渠道1|乐客渠道2|乐客渠道3|乐客渠道4"],["请选择","-请选择-"]]
function getVal(currVal)
{
//当前所选择的项 ，通过参数 currVal 获得
var currVal = currVal;
//提前声明变量，记住javascript只有函数作用域，没有块级作用域，提前声明是一个好习惯
var i,j;
//清空子下拉选单 document.all.id 选中子id
//如果你不知道document.all，可以查找相关资料哦
document.all.retailer.length = 0 ;for (i = 0 ;i <valArray.length;i++)
{
//得到 当前项 在 数组中的位置
if(valArray[i][0]==currVal)
{
//得到 当前项 所有的子数据
var tmpValArray = valArray[i][1].split("|")
for(j=0;j<tmpValArray.length;j++)
{
//填充 下拉选单
document.all.retailer.options[document.all.retailer.length] = new Option(tmpValArray[j],tmpValArray[j]);
}
}
}
}
//看完之后，要不要自己动手练一下呢？
//有没有发现也很简单呢，也许你也可以考虑一下三级联动
//整体思路就是，获取你当前选项，准备好有规律的数据格式，用当前选项的值去你的数据里匹配，然后把匹配的值填充到下一个select里面，填充之前记得清空一下哦。
</script>
</html>
一个简单的二级联动效果，看完之后立马你也可以写一个（有源码，纯js，带注释）
时间： 2024-10-24 23:47:34
一个简单的二级联动效果，看完之后立马你也可以写一个（有源码，纯js，带注释）的相关文章
利用JS实现一个简单的二级联动菜单
前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS实现二级联动菜单</title> 6 </head> 7 <body> 8 <form name="form1"
spring ioc原理（看完后大家可以自己写一个spring）
控制反转/依赖注入 最近,买了本Spring入门书:spring In Action .大致浏览了下感觉还不错.就是入门了点.Manning的书还是不错的,我虽然不像哪些只看Manning书的人那样专注于Manning,但怀着崇敬 的心情和激情通览了一遍.又一次接受了IOC .DI.AOP等Spring核心概念. 先就IOC和DI谈一点我的看法. IOC(DI): 其实这个Spring架构核心的概念没有这么复杂,更不像有些书上描述的那样晦涩.java程序员都知道:java程序中的每个业务逻辑至少
（转）spring ioc原理（看完后大家可以自己写一个spring）
最近,买了本Spring入门书:spring In Action .大致浏览了下感觉还不错.就是入门了点.Manning的书还是不错的,我虽然不像哪些只看Manning书的人那样专注于Manning,但怀着崇敬的心情和激情通览了一遍.又一次接受了IOC .DI.AOP等Spring核心概念. 先就IOC和DI谈一点我的看法. IOC(DI):其实这个Spring架构核心的概念没有这么复杂,更不像有些书上描述的那样晦涩.java程序员都知道:java程序中的每个业务逻辑至少需要两个或以上的对象来协
(转)spring ioc原理（看完后大家可以自己写一个spring）
原文地址:https://blog.csdn.net/it_man/article/details/4402245 最近,买了本Spring入门书:spring In Action .大致浏览了下感觉还不错.就是入门了点.Manning的书还是不错的,我虽然不像哪些只看Manning书的人那样专注于Manning,但怀着崇敬的心情和激情通览了一遍.又一次接受了IOC .DI.AOP等Spring核心概念. 先就IOC和DI谈一点我的看法. IOC(DI):其实这个Spring架构核心的概念没有这
jQuery动态绑定事件（简单模拟二级联动效果）
绑定事件:$("#leyangjun").bind("change",function(){ jquery 给标签赋值:$('#leyangjun').text('好一朵美丽的茉莉花'); 清空表单值:$("#leyangjun").empty(); radio取值:$("input[name='radioName'][checked]").val(); <!DOCTYPE html PUBLIC "-//W3
一个简单的tr:hover效果
昨天,搞项目的时候,在一个小问题上卡了40分钟,现在想想,还是平时比较少去注意一些细节,经过这次,一定要去多注意细节了. 好了废话不多说,我现在说明下遇到的问题,一个表格中,要求是当鼠标滑过每一行时,该行就有高亮显示,前天写的时候感觉比较简单啊,就是在表格里面的tr加上一个hover样式就行,即是 tr:hover {...} ,这样就行了,当时也成功了.但是昨天项目又有调整,就是要给td一个背景色,我加上了背景色,当时没发现这个高亮的效果已经没了,晚上回来调试的时候老不行当时的想法是样式的优先
JavaScript实现Div二级联动效果（响应键盘按钮）
最近在学习javascript,给了一个题目给我,写一个二级联动效果.当做练习. 写一个二级联动的HTML页面,具体要求如下: 1.页面支持通过键盘上的上下左右键实现焦点的移动 2.页面左侧为父栏目名称,如电影.电视剧.体育.音乐.少儿.综艺.咨询等 3.焦点在对应父栏目上时,展示子栏目信息,如电影栏目下有1,2,3,4,5等子栏目: 4.页面数据为静态数据,可以配置修改: 效果: <html> <head> <title>二级联动</title> <
用js做一个简单的留言板效果
html部分: 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head> 4: <title>js实现简单留言板</title> 5: <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6: <link rel="stylesheet&quo
从一个简单的聊天程序SimpleChat看VPN技术
SimpleVPN写好了以后,感觉比较简单,我觉得只有简单的东西才经得起折腾,才能全民折腾,所以说SimpleVPN还不够简单,本文来一个更加简单的,展示一个超级简单的点对点聊天程序,而且还带简单加密哦.顺便,我们再来看下,到底什么是VPN以及怎样实现它. QQ如今才刚刚行过成年之礼,典型的90后00前,却早已到了后浪把前浪拍到岸边的砍儿,果不其然,被10后的微信给逆袭了...好在都是腾讯的,这就把竞争收敛到了公司内部,不然这将意味着一个巨人的倒下,太可怕了.多年前,很多人逆向过QQ