jquery中select的用法

最新推荐文章于 2022-12-19 10:48:33 发布

forever_44944

最新推荐文章于 2022-12-19 10:48:33 发布

阅读量682

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery select javascript html web开发

本文链接：https://blog.youkuaiyun.com/forever_44944/article/details/46733777

jquery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用jQuery操作HTML中的Select元素，包括获取和设置选中项、动态添加选项及响应事件等常见操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<select id="aa" name="aa" onchange="onSelectChanged(this)">
  <option value="1" selected="selected">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
  <option value="4">d</option>
</select>

1.获取select的jquery对象

按id获取：$("select#aa")

按名称获取：$("select[name='aa']");

2.选中某项

$("select#aa").val(2);

3.获取当前选中的option的值

$("select#aa").val();

4.获取当前选中的option的文本

$("select#aa option[value='"+ $("select#aa").val() + "']").text();

注意：

也可以用option的selected属性选择，但是需要注意不同浏览器该属性的取值不同，按照html标准[1]，selected的取值应该是“selected”或者是空字符串，或者没有该属性，但是在chrome中，该属性的取值是true和false

5.响应事件

onchange属性

function <span style="font-family: Arial, Helvetica, sans-serif;">onSelectChanged</span><span style="font-family: Arial, Helvetica, sans-serif;">(obj) {</span>
  alert($(obj).val());
}

6.动态添加option

$("select#aa").append('<option value="5">e</option>');

7.清空option

$("select#aa").empty();

[1]. http://www.w3.org/TR/html-markup/option.html