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 ...
随机推荐
- CentOS6.6源码编译升级GCC至4.8.2
升级前提 源码编译需要至少要有一个可用的gcc编译器. 可以用过yum自动安装或者手动下载rpm包安装. 通过yum可以看到至少需要下面这些安装包,所以可以到许多rpm package站点中搜索下载相 ...
- XML2_XML的节点和元素
在JAVA语言中使用JAXP操作XML文件的时候,有两个接口,一个是Node,一个是Element,Element接口继承自Node接口. 在这一层次我们进一步理解XML中更具体的分类: 元素,属性, ...
- var t = a&&b;的问题
var a = "avalue";var b = "bvalue";var t = a&&b;console.info(t); // bvalu ...
- 使用reinterpret_cast的危险
关键字: c++ cast // Cast.cpp : Defines the entry point for the console application. // #include "s ...
- (转载).Net HttpPost的发送和接收示例代码
HttpPost在不同系统进行数据交互的时候经常被使用.它的最大好处在于直接,不像Webservice或者WCF需要wsdl作为一个双方的"中介".在安全性上,往往通过IP限制的方 ...
- POJ 1905 Expanding Rods 二分答案几何
题目:http://poj.org/problem?id=1905 恶心死了,POJ的输出一会要lf,一会要f,而且精度1e-13才过,1e-12都不行,错了一万遍终于对了. #include < ...
- html5应用程序标签
一.html5应用程序标签 (1)datalist需要数据载体 input list属性指向数据源 <input type="text" list="input_l ...
- [置顶] Android Journal
==================================================================================================== ...
- python 重载 __hash__ __eq__
__author__ = 'root' from urlparse import urlparse class host_news(): def __init__(self, id, url): se ...
- bzoj 2107: Spoj2832 Find The Determinant III 辗转相除法
2107: Spoj2832 Find The Determinant III Time Limit: 1 Sec Memory Limit: 259 MBSubmit: 154 Solved: ...