jQuery 获取和设置HTML select元素的选中选项值

在本文中，我们将介绍如何使用jQuery来获取和设置HTML select元素的选中选项值。

获取选中选项值

要获取HTML select元素的选中选项值，我们可以使用.val()方法。该方法将返回选中选项的值。

示例代码如下：

// HTML:
<select id="mySelect">
  <option value="option1">选项1</option>
  <option value="option2" selected>选项2</option>
  <option value="option3">选项3</option>
</select>

// jQuery:
var selectedValue = $('#mySelect').val();
console.log(selectedValue);  // 输出：option2

在上面的示例中，我们首先通过选择器选择了id为”mySelect”的HTML select元素。然后使用.val()方法获取了选中选项的值，并将其赋值给变量selectedValue。最后，我们通过console.log()方法将选中选项的值输出到控制台。

设置选中选项值

要设置HTML select元素的选中选项值，我们可以使用.val()方法或使用.setAttribute()方法。

使用.val()方法设置选中选项值的示例代码如下：

// HTML:
<select id="mySelect">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

// jQuery:
$('#mySelect').val('option3');

在上面的示例中，我们通过选择器选择了id为”mySelect”的HTML select元素。然后使用.val()方法将选中选项的值设置为”option3″。

使用.setAttribute()方法设置选中选项值的示例代码如下：

// HTML:
<select id="mySelect">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

// jQuery:
$('#mySelect').get(0).setAttribute('value', 'option3');

在上面的示例中，我们通过选择器选择了id为”mySelect”的HTML select元素。然后使用.get(0)方法获取HTML select元素的原生DOM对象，并使用.setAttribute()方法将选中选项的值设置为”option3″。