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);
    })
}

 

posted @   名字不好起啊  阅读(43851)  评论(1)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
点击右上角即可分享
微信分享提示