当前位置：主页 > 查看内容

select下拉选项的selectedIndex属性（你用过吗）

发布时间：2021-07-11 00:00| 有 位朋友查看

简介：目录 内容介绍 一、使用方法 1、设置选中项 2、获取索引 3、删除指定项 4、修改指定项文本 二、示例 内容介绍 ??selectIndex为被选中option元素的索引值通过selectIndex可设置选中项、获取索引值、删除指定项和修改指定项文本。 一、使用方法 1、设置选中项……

目录

内容介绍

??selectIndex为被选中option元素的索引值，通过selectIndex可设置选中项、获取索引值、删除指定项和修改指定项文本。

一、使用方法

1、设置选中项
// 设置选中项(0-第一项，-1-空)
cons.selectedIndex = 0;
2、获取索引
// 获取索引
let getIndex = cons.selectedIndex;
console.log("当前选项索引值：", getIndex);
3、删除指定项
// 删除指定项
cons.remove(getIndex);
4、修改指定项文本
// 修改指定项文本
cons.options[0].text = "修改指定项文本"

二、示例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>select下拉选项的selectedIndex属性</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

</head>

<body style="margin-top: 30vh;">
    <div class="box" style="width: 200px;margin: 0 auto;border:0.3px solid #2195FF;padding:30px">
        <select name="cons" id="cons" style="width: 150px;height: 30px;text-indent: 10px; ">
        <option value="0">please0</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        <option value="4">option4</option>
        <option value="5">option5</option>
        <option value="6">option6</option>
        <option value="7">option7</option>
        <option value="8">option8</option>
    </select>
        <ul>
            <li>设置选中项</li>
            <li>获取索引</li>
            <li>删除指定项</li>
            <li>修改指定项文本</li>
        </ul>
    </div>
    <script>
        var cons = document.getElementById("cons");
        // 设置选中项(0-第一项，-1-空)
        cons.selectedIndex = 0;
        cons.addEventListener("change", function() {
            // 获取索引
            let getIndex = cons.selectedIndex;
            console.log("当前选项索引值：", getIndex);
            // 删除指定项
            let optionLen = cons.querySelectorAll("option").length;
            console.log("删除最后一项");
            cons.remove(optionLen - 1);
            // 修改指定项文本
            cons.options[0].text = "修改指定项文本"
        })
    </script>
</body>

</html>

标签：javascript，下拉选项，select，option，索引值

更多演示案例，查看 案例演示

欢迎评论留言!

；原文链接：https://blog.csdn.net/cainiaoyihao_/article/details/115524147
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：JavaScript 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐