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);
        })
    }
  • 相关阅读:
    PowerDesigner中生成SQL SERVER2005字段注释 和导出图片的方法
    右键显示打开控制台
    dubbo 的 Protocol 类
    nacos 的 grpc
    shell 替换文本中 为空格,多行为本合并为一行
    gcc、python3、python性能分析工具安装
    kafka listeners和advertised
    Default Activity not found 问题解决
    使用Global Mapper计算kml中面状图形的面积
    jeecg-boot 报表组——折线图初始化显示部分图例,部分变灰
  • 原文地址:https://www.cnblogs.com/guofan/p/6806487.html
Copyright © 2011-2022 走看看