js select级联,上面分类,下面是内容
js select级联,上面分类,下面是内容。
js级联效果如下:
请选择
水果
蔬菜
其他
html和js代码如下:
<html>
<head>
<title>js select级联,上面分类,下面是内容</title>
<meta http-equiv="Content-Type" content="text/html;charset=GBK"/>
</head>
<body>
<div>
<label for="form-field-select-1">分类:</label>
<select class="form-control" onchange="changeType(this)">
<option value="">请选择</option>
<option value="1">水果</option>
<option value="2">蔬菜</option>
<option value="3">其他</option>
</select>
</div>
<div>
<label for="form-field-select-1">内容:</label>
<select id="itemId" class="form-control" multiple="multiple">
</select>
</div>
<script type="text/javascript">
var waItemsJson = [
{"type_id":1,"id":11,"item_code":"苹果","item_name":"苹果"},
{"type_id":1,"id":11,"item_code":"香蕉","item_name":"香蕉"},
{"type_id":1,"id":11,"item_code":"梨","item_name":"梨"},
{"type_id":2,"id":11,"item_code":"白菜","item_name":"白菜"},
{"type_id":2,"id":11,"item_code":"青菜","item_name":"青菜"},
{"type_id":3,"id":11,"item_code":"可乐","item_name":"可乐"}
]; function changeType(obj){
removeAll("itemId");
for(var i=0;i<waItemsJson.length;i++){
if(obj.value==waItemsJson[i].type_id || obj.value=="" ){
addOption("itemId",waItemsJson[i].item_name,waItemsJson[i].item_name);
}
}
} /**
* 删除objId下所有的options
*/
function removeAll(objId){
var obj=document.getElementById(objId);
obj.options.length=0;
}
/**
* objId下 添加 option
*/
function addOption(objId,text,value){
var obj=document.getElementById(objId);
obj.options.add(new Option(text,value)); //这个兼容IE与firefox
}
</script>
</body>
</html>
js select级联,上面分类,下面是内容的更多相关文章
- js控制select选中显示不同表单内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jqery对于select级联操作
问题:今天在做一个需求的时候,有一个级联操作也就是选中下拉框的一列就显示对对应的数据 处理:我在做级联的时候在option的列里面绑定click的事件发现这个事件行不通:查资料发现select触发的是 ...
- JS动态级联菜单
JS动态级联菜单是前端常用的一个功能,特此抽时间研究了下,附上代码 <html> <head> <meta charset="utf-8" /> ...
- .net获取select控件中的文本内容
.net获取select控件中的文本内容 2009-11-28 21:19小V古 | 分类:C#/.NET | 浏览1374次 <select id="SecType" st ...
- jQuery实现select级联
使用Html5的数据属性(data-*)Map级联关系,代码如下: <!DOCTYPE html> <html> <head> <title>Selec ...
- JS日期级联组件代码分析及demo
最近研究下JS日期级联效果 感觉还不错,然后看了下kissy也正好有这么一个组件,也看了下源码,写的还不错,通过google最早是在2011年 淘宝的虎牙(花名)用原审JS写了一个(貌似据说是从YUI ...
- js省市级联实现
js省市级联实现. for [element] in [collection] 用于循环下标,常用于json for(index in arr){ console.info("下标:&quo ...
- XML:使用DOM技术解析xML文件中的城市,实现select级联选择
中国的城市xml格式:cities.xml <?xml version="1.0" encoding="utf-8"?> <china> ...
- JS实现复制网页内容自动加入版权内容代码和原文链接
JS实现复制网页内容自动加入版权内容代码和原文链接 实现代码:在body内放入如下代码即可: <script type="text/javascript"> var S ...
随机推荐
- 基于ActiveMQ的点对点收发消息
ActiveMQ是apache的一个开源消息引擎.可以作为即通引擎或者消息中间件引擎. 准备 下载ActiveMQ http://activemq.apache.org/download.html 进 ...
- OpenCart框架运行流程介绍
框架运行流程介绍 这样的一个get请求http://hostname/index.php?route=common/home 发生了什么? 1. 开始执行入口文件index.php. 2. requi ...
- 30年的Hello world
30 年的 Hello world 转载自:http://www.admin10000.com/document/2398.html 最近我在7月4日这一天所在的那周休假了.休假期间,我利用大把的时间 ...
- c/c++ 传统数组的缺点
专题: 动态内存分配 (所有高级语言,没有C里深刻) 传统数组的缺点: 1.数组长度必须事先指定,而且只能是常整数,不能是变量 例子 ]; //必须事先指定,而且只能是常整数 ; int a ...
- CrystalDiskMark 的使用方法
CrystalDiskMark 是一个测试你的硬盘或者存储设备的小巧硬盘测试工具.简单易于操作的界面让你随时可以测试你的存储设备,测试存储设备大小和测试数字都可以选择,还可测试可读和可写的速度. 具体 ...
- BeRoTinyPascal
https://github.com/BeRo1985/berotinypascal https://github.com/thachngopl/berotinypascal
- android 双向滑动 seekbar
实现原理: 1.自定义View,在onDraw(Canvas canvas)中,画出2个Drawable滑动块,2个Drawable滑动条,2个Paint(text) 2.监听onTouchEvent ...
- struts一点心得
action中: 设置属性并增加get,set方法,给属性赋值后 (如: private String name; public String getName() { return name; } p ...
- [译]GotW #1: Variable Initialization 续
Answer 2. 下面每行代码都做了什么? 在Q2中,我们创建了一个vector<int>且传了参数10和20到构造函数中,第一种情况下(10,20),第二种情况是{10, 20}. 它 ...
- delphi中WEBBrowser网页html相互调用(一)
1.基本操作1.1.激活 var doc,url:Olevariant ; begin url:='about:blank' ;//或者一个有实际意义的url WebBrowser1.Navigate ...