jQuery操作下拉框select

heromps

于 2021-03-22 15:17:48 发布

阅读量343

点赞数

分类专栏： js 文章标签： js javascript

本文链接：https://blog.csdn.net/heromps/article/details/114920253

版权

js 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

获取select值

html结构添加select

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    <select id="selector">
        <option value="1">选项一</option>
        <option value="2">选项二</option>
        <option value="3">选项三</option>
        <option value="4">选项四</option>
    </select>
</body>
<script>
</script>

</html>

获取当前选项中的text和value

 	var text = $("#selector").find("option:selected").text();
    var value = $("#selector").find("option:selected").val();
    console.log("text:" + text);
    console.log("value:" + value);

在这里插入图片描述

获取当前选项中的索引(从0开始)

var index = $("#selector").get(0).selectedIndex;

在这里插入图片描述

获取第一项（最小）和最后一项（最大）的text

	var first = $("#selector option:last").text();
    var last = $("#selector option:first").text();
    console.log("last:" + last);
    console.log("first:" + first);

在这里插入图片描述

更改设置选中状态

改变select的选中，执行该语句后将第1个设置为选中状态，eq(i),i为索引值

    $("#selector").each(function () {
        $(this).find("option").eq(1).prop("selected", true)
    });

在这里插入图片描述

为select添加事件，当选择其中一项时触发事件

	$('#selector').change(function (e) {
        alert("事件触发");
    });

在这里插入图片描述

设置select索引值为2的项选中

$("#selector").get(0).selectedIndex = 2;

在这里插入图片描述

设置select的value值为1的项选中

$("#selector option[value='1']").prop("selected", true);

在这里插入图片描述

添加删除select选项

为select添加一个option下拉项，在末尾添加

$("#selector").append("<option value='5'>选项五</option>");

在这里插入图片描述

为select添加一个option下拉项，在起始位置添加

$("#selector").prepend("<option value='5'>选项五</option>");

在这里插入图片描述

删除select最后一个option

$("#selector option:last").remove();

在这里插入图片描述

删除select中value=3的option

$("#selector option[value='3']").remove();

在这里插入图片描述

heromps

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录