内容介绍
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>
<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>
标签：javascript，下拉选项，select，option，索引值
更多演示案例，查看 案例演示
欢迎评论留言!
版权声明：本文为cainiaoyihao_原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。