获取 select2 选定值 jquery

📌 相关文章

📜 获取 select2 选定值 jquery - Javascript (1)

📅 最后修改于: 2023-12-03 15:11:50.630000 🧑 作者: Mango

当使用 select2 插件时，你可以轻松地将一个标准的 select 元素转变为一个强大的、交互式的下拉框。本文将介绍如何使用 jQuery 获取 select2 选定的值。

准备工作

在使用 select2 插件之前，你需要先引入相关的 CSS 和 JS 文件，并将 select 元素转变为 select2 组件。例如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Select2 Demo</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
</head>
<body>
  <select class="select2" multiple="multiple">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
  <script>
    $('.select2').select2();
  </script>
</body>
</html>

在示例代码中，我们引入了 select2.css、jQuery 和 select2.js 文件，并将一个 select 元素转变为 select2 组件。

方案一：使用 val() 方法

可以使用 jQuery 提供的 val() 方法来获取 select2 组件中选定的值。例如：

var selectedValues = $('.select2').val();
console.log(selectedValues);

在示例代码中，我们使用 jQuery 选择器获取 select2 组件，然后使用 val() 方法获取选定的值，并将其赋值给 selectedValues 变量。最后，在控制台中输出选定的值。

方案二：使用 data() 方法

另外，你还可以使用 data() 方法来获取 select2 组件中选定的值。例如：

var selectedValues = $('.select2').select2('data');
console.log(selectedValues);

在示例代码中，我们使用 jQuery 选择器获取 select2 组件，然后使用 select2() 方法初始化组件。接着，使用 data() 方法获取选定的值，并将其赋值给 selectedValues 变量。最后，在控制台中输出选定的值。

总结

以上就是获取 select2 选定值的两种方案。无论你选择哪种方案，一定要注意 select 元素是否已经被成功转变为 select2 组件，否则将无法获取选定的值。