selectドロップオプションのselectedIndex属性(使ったことがありますか?)

17813 ワード

JavaScript javascript 索引

コンテンツ紹介

、使い方

1、選択項目を設定する

、インデックス取得

、指定項目を削除する

、指定項目テキストを修正する

、例:

内容の紹介
選択されたオプトモーション要素のインデックス値は、選択項目を設定し、インデックス値を取得し、指定項目を削除し、指定項目のテキストを修正します.
一、使い方
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、オプト、インデックス値
もっと多くのデモの実例、判例のデモを見ます.
コメントありがとうございます

温故知新編の『JavaScript忍者秘籍(第二版)』学習総括(三)――閉包と作用領域