码迷,mamicode.com
首页 > Web开发 > 详细

jquery 操作 select 默认选择第一个元素

时间:2017-05-04 13:29:04      阅读:505      评论:0      收藏:0      [点我收藏+]

标签:code   打开   pre   utf-8   meta   bsp   onclick   页面   第一个   

  问题:点击按钮设置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);
    })
}

 

jquery 操作 select 默认选择第一个元素

标签:code   打开   pre   utf-8   meta   bsp   onclick   页面   第一个   

原文地址:http://www.cnblogs.com/guofan/p/6806487.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!