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 ...
随机推荐
- yii2源码学习笔记（十八）
View继承了component,用于渲染视图文件:yii2\base\View.php <?php /** * @link http://www.yiiframework.com/ * @co ...
- ARM 的Thumb状态测试
作为一个使用ARM的学习者,有必要全面了解你的处理器内核.尽管有些内容可能在实际应用中用不到,但是“了解”还是很必要的.Thumb状态,是ARM的一个特色,但是你知道Thumb状态与ARM状态最大的区 ...
- css常用伪类记录
1.超链接使用css伪类设置颜色 a:link {color: #000000} /* 未访问的链接 */a:visited {color: #d90a81} /* 已访问的链接 */a:hover ...
- Rsync和FastDFS
在做分布式文件存储的时候,常常用到两个工具,Rsync和FastDFS:这两者本质的区别在于前者的实时性相面相对较差,需要手工编写脚本同步,然后在放到定时任务(cron)中:FastDFS自动实现同组 ...
- 国内物联网平台初探（八）：移动云OneNET
国内物联网平台初探(八)——移动云OneNET 平台架构 数据模型 使用场景示意图 服务 IOT Paas 基础服务 为IoT开发者提供智能设备自助开发工具.后台技术支持服务,为您提供物联网专网.短彩 ...
- Word两端对齐问题
主要是有英文的话,选择两端对齐后字符间距变大,这时候可以选择段落-----中文版式----------允许西文在单词中间换行,这个在最左上角的word选项里也有.遇到好几次这样的,主要是在参考文献里.
- weixin
http://gps.yesky.com/19/34467019.shtml http://***/goods.php?id=320 http://www.sablog.net/blog/archiv ...
- Django 安全策略的 7 条总结！
Florian Apolloner 发言主题为 Django 安全,其中并未讨论针对 SSL 协议的攻击--因为那不在 Django 涉及范围内.(如感兴趣可参考 https://www.ssllab ...
- UIKIT网页基本结构学习
没办法,哈哈,以后一段时间,如果公司没有招到合适的运维研发, 啥啥都要我一个人先顶上了~~~:) 也好,可以让人成长. UIKIT,BOOTSTRAP之类的前端,搞一个是有好处的,我们以前即然是用了U ...
- 【网络流24题】No.16 数字梯形问题 (不相交路径 最大费用流)
[题意] 给定一个由 n 行数字组成的数字梯形如下图所示. 梯形的第一行有 m 个数字.从梯形的顶部的 m 个数字开始,在每个数字处可以沿左下或右下方向移动, 形成一条从梯形的顶至底的路径.规则 1: ...