zoukankan      html  css  js  c++  java
  • 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> 
  • 相关阅读:
    创业者要有杀手气质和传教士能力
    一次只专心地做一件事,全身心地投入并积极地希望它成功
    以变应变,才有出路
    得到的并不一定就值得庆幸,失去的也并不完全是坏事情
    独处可以激发思考的力量
    把情感装入理性之盒
    随着现实的变化,我们必须随之调整自己的观念、思想、行动及目标
    岁月在变迁,彼此在成长。而我在流浪
    [TJOI 2016&HEOI 2016]排序
    [HAOI 2008]糖果传递
  • 原文地址:https://www.cnblogs.com/haha12/p/4711031.html
Copyright © 2011-2022 走看看