zoukankan      html  css  js  c++  java
  • jquery 操作 select 默认选择第一个元素

      问题:点击按钮设置select元素的默认选项。

      首先,有个环境,并引入jquery。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset='utf-8'>
            <script src='jquery-1.11.3.js'></script>
        </head>
        <body>
            <select id='s1' class='selector'>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
            </select>
            
            <select id='s2' class='selector'>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
            </select>
            
            <button onclick='resetValue()'>click me to reset select value</button>
            <script>
                function resetValue () {
    
                }
            </script>
        </body>
    </html>

      接下来就要写方法了,其实思路很好懂,使用 jquery 也很 easy 来实现:

      1、首先找到 select 元素,这里我们给他一个 class 方便查找。

    var selectArr = $('.selector');

      2、找到这个 select 数组后,通过 jquery 的 each() 方法进行遍历。第一个参数是下标位置,第二个参数是数组元素。

    selectArr.each(function (i, j) {
    
    })

      3、对于每个select元素,我们需要做的是对其下的第一个 option 标签进行设置选中

    var options = $(j).find("option");
    options.first().attr("selected", true);

      4、打开页面,点点,咦,怎么有点问题?哈,在设置选中前,要将之前选中项置 false。这里我就全 false 一下方便。

    options.attr("selected", false);

      完成啦!

      最终方法内容:

    function resetValue () {
        $('.selector').each(function (i, j) {
            var options = $(j).find("option");
            options.attr("selected", false);
            options.first().attr("selected", true);
        })
    }

       再来简化下(将之前选中项置 false):

    function resetValue () {
        $('.selector').each(function (i, j) {
            $(j).find("option:selected").attr("selected", false);
            $(j).find("option").first().attr("selected", true);
        })
    }
  • 相关阅读:
    git hub 资料汇总
    java 实例化是调用了子类重写方法
    java接口示例
    cumber + selenium +java自动化测试
    解决selenium 启动ie浏览器报错:Unexpected error launching Internet Explorer. Protected Mode settings are not the same for all zones
    springmvc 数据回显功能
    springmvc管理资源开放
    springmvc 中controller与jsp传值
    springmvc注解事例
    springmvc
  • 原文地址:https://www.cnblogs.com/guofan/p/6806487.html
Copyright © 2011-2022 走看看