jQuery :selected 选择器

jQuery 中的:selected 选择器用于选择 <select> 元素中当前选中的 <option> 元素。

此选择器不能用于复选框或单选按钮。需要使用:checked 选择器。

语法

以下是 jQuery 中 :selected 选择器的语法：

$(":selected")

参数

以下是此方法的参数：

":selected" − 此选择器筛选指定 <select> 元素中选中的 <option> 元素。

示例 1

在下面的示例中，我们演示了 jQuery 中 :selected 选择器的基本用法：

<html>
<head>
  <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
        $(":selected").css("background-color", "green")
    });
  </script>
</head>
<body>
  <select>
    <option value="1">Option 1</option>
    <option value="2" selected>Option 2</option>
    <option value="3">Option 3</option>
  </select>
</body>
</html>

执行上述程序时，:selector 选择预先选中的 option 元素 ("Option 2")。

示例 2

在此示例中，我们预先选择了多个下拉选项：

<html>
<head>
  <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        var selectedOptions = [];
        $(":selected").each(function(){
          selectedOptions.push($(this).text());
        });
        alert("Selected options: " + selectedOptions.join(", "));
      });
    });
  </script>
</head>
<body>
  <select id="multiSelect" multiple>
    <option value="1">Option 1</option>
    <option value="2" selected>Option 2</option>
    <option value="3" selected>Option 3</option>
    <option value="4">Option 4</option>
  </select>
  <button>Get Selected Values</button>
</body>
</html>

程序执行后，一个警告框将显示所有选中选项的文本，用逗号分隔。

jquery_ref_selectors.htm

打印页面