六、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();
                    }
                })
            })

 

posted @ 2015-11-02 22:03  XINYUHAI77  阅读(178)  评论(0)  编辑  收藏  举报