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

一、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);
    })
}
  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值