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