目錄
- 內容介紹
- 一、使用方法
- 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 = "修改指定項文本"
二、示例：
<!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://www.uj5u.com/qianduan/276639.html
標籤：其他
上一篇：Java8新特性筆記
下一篇：JSP和Thymeleaf