jQuery获得option的值和对option进行操作

在使用jQuery的时候，经常需要获取select标签的option的值，或者对option进行操作（比如动态添加、删除等），本文将提供一些jquery获取option值和对option进行操作的方法。

获取option的值

获取当前被选中的option的值

使用$('select').val()可以获取select标签当前被选中的option的value值。

$('select').val();

例如下面的HTML代码：

<select class="my-select">
  <option value="1">选项1</option>
  <option value="2" selected>选项2</option>
  <option value="3">选项3</option>
</select>

执行上面的javascript代码后，可以获取到值为2的option的value值。

获取option的文本

使用$('select option:selected').text()可以获取当前被选中的option的文本。

$('select option:selected').text();

例如下面的HTML代码：

<select class="my-select">
  <option value="1">选项1</option>
  <option value="2" selected>选项2</option>
  <option value="3">选项3</option>
</select>

执行上面的javascript代码后，可以获取到文本为“选项2”的option的文本。

获取某个指定option的值

使用$('select option:eq(index)').val()可以获取指定位置的option的值，其中index从0开始。

例如下面的HTML代码：

<select class="my-select">
  <option value="1">选项1</option>
  <option value="2" selected>选项2</option>
  <option value="3">选项3</option>
</select>

执行以下javascript代码后，可以获取下标为1的option的value值（即“2”）：

$('select option:eq(1)').val();

对option进行操作

动态添加option

使用$('select').append()可以在select标签的末尾添加新的option选项。

例如下面的HTML代码：

<select class="my-select">
  <option value="1">选项1</option>
</select>

执行以下javascript代码后，可以在原来的option选项后添加一个新的选项：

$('select').append('<option value="2">选项2</option>');

动态删除option

使用$('select option:selected').remove()可以删除select标签中当前被选中的option选项。

例如下面的HTML代码：

<select class="my-select">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

执行以下javascript代码后，可以删除当前被选中的option（即选项2）：

$('select option:selected').remove();

注意：在使用动态添加或删除操作时，应该先判断是否存在对应的option选项，否则可能会发生错误。

以上就是jQuery获得option的值和对option进行操作的攻略，希望能帮助到大家。