jQuery: 以 programatically 选择选择框

在 web 应用程序中，使用表格、表单和选择框（select box）是一个家常便饭，而在这中的一个共性是需要使用 JavaScript 代码处理用户交互。而 jQuery 就是在这样的环境下应运而生的，它提供了一个强大的 API 以便于开发人员快速构建交互性高的网站和应用。

本文将介绍如何使用 jQuery 来通过编程方式（programatically）选择选择框并获取其选中值。

选择框的基本结构

首先，让我们来看一下通常的选择框的 HTML 结构：

<select id="my-select">
  <option value="option-1">Option 1</option>
  <option value="option-2">Option 2</option>
  <option value="option-3">Option 3</option>
</select>

这是一个拥有三个选项的选择框，它们的值依次为 "option-1"、"option-2" 和 "option-3"。现在，让我们来尝试使用 jQuery 来选择这个选择框并获取其选中值。

使用 jQuery 选择选择框

首先，我们需要使用 jQuery 的 $('#id') 方法来选择 HTML 指定的选择框元素。对于上面的例子，我们可以使用以下代码来选择选择框：

var selectBox = $('#my-select');

这个代码将选择具有 id 为 "my-select" 的选择框，并将其存储在 selectBox 变量中。现在，让我们来尝试获取选择框中当前选中的值。

获取选中值

获取选择框中的值非常简单，只需要使用 jQuery 的 val() 方法即可。以下代码将会返回当前所选项（如果有）的值：

var selectedValue = selectBox.val();
console.log(selectedValue);  // 输出所选项的值，如果没有选项被选中则输出 null

设置选中值

要设置选择框的选中值，只需要在 val() 方法中传入你希望选中的选项的值即可。例如，以下代码将会将值为 "option-2" 的选项设置为当前选中项：

selectBox.val('option-2');

总结

通过本文，你已经了解了如何使用 jQuery 来选择选择框，以及如何获取和设置其选中值。在实际项目中，你可能需要使用选择框的其他方法来进行更为复杂的交互。但是，本文介绍的内容将会帮助你开始理解基本的选择框操作，并为你提供一个良好的起点。