Thuộc tính chỉ mục tùy chọn HTML DOM trả về và sửa đổi vị trí chỉ mục của một tùy chọn trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
-
Chỉ mục trả lại
object.index
-
Đang sửa đổi chỉ mục
object.index = “number”
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính chỉ mục tùy chọn HTML -
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
height:100%;
}
p{
font-weight:700;
font-size:1.2rem;
}
.drop-down{
width:35%;
border:2px solid #fff;
font-weight:bold;
padding:8px;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
.show{
font-size:1.5rem;
font-weight:bold;
}
</style>
</head>
<body>
<h1>DOM Option index Demo</h1>
<p>i, Select your favourite subject:</p>
<select class='drop-down' name="Drop Down List">
<option>Physics</option>
<option>Maths</option>
<option>Chemistry</option>
<option>English</option>
</select>
<button onclick="showIndex()" class="btn">Show Index</button>
<div class="show"></div>
<script>
function showIndex() {
var dropDown=document.querySelector(".drop-down");
var showMsg=document.querySelector(".show");
showMsg.innerHTML="Selected option index is: "+dropDown.options[dropDown.selectedIndex].index;
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào nút "Hiển thị Chỉ mục" để hiển thị chỉ mục của tùy chọn đã chọn.
