JS检索下拉列表框中被选项目的索引号（selectedIndex）是指在HTML中使用
获取selectedIndex属性值
下面是一个简单的示例，展示如何获取下拉列表框中当前选中项的索引位置，代码如下：
<html>
<body>
<h3>请选择一项:</h3>
<select id="mySelect">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange" selected>橘子</option>
</select>
<br><br>
<button onclick="getSelectedIndex()">获取当前选中项索引号</button>
<script>
function getSelectedIndex() {
var selectElement = document.getElementById("mySelect");
alert("当前选中项索引号为：" + selectElement.selectedIndex);
}
</script>
</body>
</html>
在这段代码中，我们首先创建了一个含有3个选项的下拉列表框，并将其中的第3个选项“橘子”设置为默认选项，然后在页面上添加一个按钮，当用户点击该按钮时，调用getSelectedIndex()函数来获取当前选中项的索引位置，并通过alert()弹出提示框显示出来。运行代码后，可以看到弹出框上显示的信息是“当前选中项索引号为：2”，这是因为在橘子选项中的"selected"属性设置了默认选项。
设置selectedIndex属性值
除了获取selectedIndex属性值，我们还可以通过设置该属性值来改变下拉列表框中的选中选项。下面是一个示例，展示如何通过设置selectedIndex属性值来改变下拉列表框中的选中项，代码如下：
<html>
<body>
<h3>请选择一项:</h3>
<select id="mySelect">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橘子</option>
</select>
<br><br>
<button onclick="setSelectedIndex()">设置选中项索引号为1</button>
<script>
function setSelectedIndex() {
var selectElement = document.getElementById("mySelect");
selectElement.selectedIndex = 1;
}
</script>
</body>
</html>
在这段代码中，我们创建了一个下拉列表框，并添加一个按钮，当用户点击该按钮时，调用setSelectedIndex()函数来将选中项更改为第2个选项，也就是“香蕉”。运行代码后，可以看到下拉列表框中的选中项已经变为“香蕉”。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS检索下拉列表框中被选项目的索引号(selectedIndex) - Python技术站
微信扫一扫 
支付宝扫一扫 