HTML DOM弹出下拉列表中被选中的选项的索引

HTML DOM 下拉列表选中选项索引

详细介绍

HTML DOM 中的 selectedIndex 属性用于获取或设置下拉列表（<select> 元素）中当前选中选项的索引值。索引从 0 开始，表示第一个选项，-1 表示没有选中任何选项。

相关标签

• <select>: 创建下拉列表

• <option>: 定义下拉列表中的选项

用法

// 获取选中索引
var index = selectElement.selectedIndex;

// 设置选中索引
selectElement.selectedIndex = newIndex;

实例

<select id="mySelect">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

<button onclick="getSelectedIndex()">获取选中索引</button>

<script>
function getSelectedIndex() {
  var select = document.getElementById("mySelect");
  var index = select.selectedIndex;
  alert("选中的索引是: " + index);
}
</script>

功能

1. 获取当前选中项的索引

2. 通过编程方式改变选中项

3. 结合 options 集合访问特定选项的属性

4. 可用于表单验证和数据提取

CSS 扩展

虽然 selectedIndex 是 JavaScript 属性，但可以通过 CSS 结合 JavaScript 来增强下拉列表的样式：

/* 自定义下拉列表样式 */
select {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
}

/* 选中项的特殊样式 */
select option:checked {
  background-color: #e0e0e0;
  font-weight: bold;
}

// 动态添加CSS类
document.getElementById("mySelect").addEventListener("change", function() {
  this.classList.add("selected");
});

/* 动态添加的类样式 */
select.selected {
  border-color: #4CAF50;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}