jquery 操作 select 默认选择第一个元素
Posted 名字不好起啊
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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); }) }
以上是关于jquery 操作 select 默认选择第一个元素的主要内容，如果未能解决你的问题，请参考以下文章
每当我更改第一个下拉列表中的选项时，需要 jquery 将第二个下拉列表的默认选项更改为“选择”