select下拉选项的selectedIndex属性(你用过吗)

目录

        • 内容介绍
        • 一、使用方法
          • 1、设置选中项
          • 2、获取索引
          • 3、删除指定项
          • 4、修改指定项文本
        • 二、示例:

内容介绍

  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 = "修改指定项文本"

二、示例:


<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">please0option>
        <option value="1">option1option>
        <option value="2">option2option>
        <option value="3">option3option>
        <option value="4">option4option>
        <option value="5">option5option>
        <option value="6">option6option>
        <option value="7">option7option>
        <option value="8">option8option>
    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,索引值


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


欢迎评论留言!

你可能感兴趣的:(JavaScript,javascript,索引)