重置/清除按钮----select默认选择第一个option为重置内容

最新推荐文章于 2024-07-30 03:22:28 发布

wangsongll

最新推荐文章于 2024-07-30 03:22:28 发布

阅读量1.1w

点赞数 2

分类专栏： jsp

jsp 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、html代码

<!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);
　　完成啦！

5、最终方法内容：
function resetValue () {
    $('.selector').each(function (i, j) {
        var options = $(j).find("option");
        options.attr("selected", false);
        options.first().attr("selected", true);
    })
}

6、再来简化下（将之前选中项置 false）：

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