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级联，上面分类，下面是内容的更多相关文章

  1. js控制select选中显示不同表单内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jqery对于select级联操作

    问题:今天在做一个需求的时候,有一个级联操作也就是选中下拉框的一列就显示对对应的数据 处理:我在做级联的时候在option的列里面绑定click的事件发现这个事件行不通:查资料发现select触发的是 ...

  3. JS动态级联菜单

    JS动态级联菜单是前端常用的一个功能,特此抽时间研究了下,附上代码 <html> <head> <meta charset="utf-8" /> ...

  4. .net获取select控件中的文本内容

    .net获取select控件中的文本内容 2009-11-28 21:19小V古 | 分类:C#/.NET | 浏览1374次 <select id="SecType" st ...

  5. jQuery实现select级联

    使用Html5的数据属性(data-*)Map级联关系,代码如下: <!DOCTYPE html> <html> <head> <title>Selec ...

  6. JS日期级联组件代码分析及demo

    最近研究下JS日期级联效果 感觉还不错,然后看了下kissy也正好有这么一个组件,也看了下源码,写的还不错,通过google最早是在2011年 淘宝的虎牙(花名)用原审JS写了一个(貌似据说是从YUI ...

  7. js省市级联实现

    js省市级联实现. for [element] in [collection] 用于循环下标,常用于json for(index in arr){ console.info("下标:&quo ...

  8. XML：使用DOM技术解析xML文件中的城市，实现select级联选择

    中国的城市xml格式:cities.xml <?xml version="1.0" encoding="utf-8"?> <china> ...

  9. JS实现复制网页内容自动加入版权内容代码和原文链接

    JS实现复制网页内容自动加入版权内容代码和原文链接 实现代码:在body内放入如下代码即可: <script type="text/javascript"> var S ...

随机推荐

  1. 对 HTTP 304 的理解(转)

    最近和同事一起看Web的Cache问题,又进一步理解了 HTTP 中的 304 又有了一些了解. 304 的标准解释是:Not Modified 客户端有缓冲的文档并发出了一个条件性的请求(一般是提供 ...

  2. ADO.NET学习小结【1】正在更新...

    小弟正在学习ADO.net有误的地方还请大大们批评指出,小弟在此谢过了 一.ADO.net简述: 以前我们写程序尤其是写和数据库有关的应用程序时,你我都得要了解Microsoft ADO COM对象才 ...

  3. POJ 3393 Lucky and Good Months by Gregorian Calendar 模拟题

    题目:http://poj.org/problem?id=3393 不多说了,简单模拟题,因为粗心写错了两个字母,导致错了N遍,模拟还是一贯的恶心,代码实在不想优化了,写的难看了点.. #includ ...

  4. Newtonsoft post Json 日期格式处理

     Newtonsoft.Json.Converters.IsoDateTimeConverter DateTimeConverter = new Newtonsoft.Json.Converters. ...

  5. Docker 安装jupyter notebook

    1. 利用image运行一个container sudo docker run -it --net=host tingting --net=host:让container可以上网,安装原来的sudo ...

  6. WebService学习整理（一）——客户端三种调用方式整理

    1 WebService基础 1.1 作用 1,       WebService是两个系统的远程调用,使两个系统进行数据交互,如应用: 天气预报服务.银行ATM取款.使用邮箱账号登录各网站等. 2, ...

  7. Word两端对齐问题

    主要是有英文的话,选择两端对齐后字符间距变大,这时候可以选择段落-----中文版式----------允许西文在单词中间换行,这个在最左上角的word选项里也有.遇到好几次这样的,主要是在参考文献里.

  8. 李洪强iOS开发Swift篇—05_元组类型

    李洪强iOS开发Swift篇—05_元组类型 一.元组类型介绍 1.什么是元组类型 元组类型由 N个 任意类型的数据组成(N >= 0),组成元组类型的数据可以称为“元素” 示例: let po ...

  9. VS2008编译器编译出来的文件比mingw编译的要几乎小一半

    为什么要在VS2008中使用QT静态编译呢?很简单,因为VS2008编译器编译出来的文件比mingw编译的要几乎小一半. 好了现在我们来做些准备工作,VS2008自然要安装的,然后打上SP1的补丁.然 ...

  10. eclipse或IDEA连接魅蓝

    1.首先 安装ADB 驱动 http://developer.android.com/tools/device.html 如果没装就自行去下载安装 别的品牌都可以顺利连接,魅族手机特有的原因导至在开发 ...