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

置顶人间小美味695

已于 2022-11-19 23:48:33 修改

阅读量9.5k

点赞数 10

分类专栏： # JavaScript 文章标签： javascript 索引

于 2021-04-15 14:24:48 首次发布

本文链接：https://blog.csdn.net/cainiaoyihao_/article/details/115524147

版权

JavaScript 专栏收录该内容

33 篇文章 7 订阅

订阅专栏

<!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>
    <script>
        console.log("%c ", 'margin-left:0px;padding:100px 100px;background-image: url("https://liujianwei695.gitee.io/minifile/images/officialAccount.jpg");background-size: 200px 200px;background-position: center;background-repeat: no-repeat;');
    </script>
</body>

</html>