• 六、jquery操作下拉列表


    一、html代码 dome1

     multiple="multiple"属性表示可多选
    <body>
            <h1>下拉列表操作</h1>
    
            学历:
            <select multiple="multiple">
                <option value="0">请选择</option>
                <option value="1">小学</option>
                <option value="2">中学</option>
                <option value="3">大学</option>
            </select>
    
            <br /><br />
            <input type="button" value="获取" onclick="f1()" />
            <input type="button" value="设置" onclick="f2()" />
        </body>

    js代码

    <script type="text/javascript" src="jquery-1.4.4.js"></script>
    
            <link href="./11.css" type="text/css" rel="stylesheet" />
            <script type="text/javascript">
            function f1(){
                //获得选中情况
                //$(:selected)
                //console.log($('option:selected').val()); //单选情况
                
                console.log($('select').val());//["1", "3"] 多选情况
            }
            function f2(){
                //设置选中情况
                //$(下拉列表).val([value值,value值])
                //$('select').val([1]);
                $('select').val([2,3]);
            }
            </script>

    二、html代码 dome2,配合change事件

    html
    
    <body>
        <h1>下拉列表操作</h1>
        <div>
        学历:
        <select >
            <option value="0">请选择</option>
            <option value="1">小学</option>
            <option value="2">中学</option>
            <option value="3" class="name">大学</option>
        </select>
        </div>
        <div style="display:none">是啊</div>
        <br /><br />
        <input type="button" value="获取" onclick="f1()" />
        <input type="button" value="设置" onclick="f2()" />
    </body>

    js、

      $(function(){
                    $('select').change(function(){
                        var panrents=$(this).parents('div')
                       var num= $(this).find('option:selected').attr('class');
                        if(num == 'name'){
                            panrents.hide().siblings('div').show();
                        }
                    })
                })
  • 相关阅读:
    少走弯路的10条忠告
    思考
    哈弗经典校训
    项目导出excel引发的一些问题
    hibernate 缓存设置
    dubbo简单用法
    sql 类型问题
    spring this.logger.isDebugEnabled()
    红黑树
    归并排序
  • 原文地址:https://www.cnblogs.com/yexiangwang/p/4931574.html
Copyright © 2020-2023  润新知