参考资料

1. HTML DOM对单个单元格的内容水平对齐
2. HTML DOM 返回图像映射的某个区域的shape 实例
3. HTML DOM 返回和设置链接的href属性实例
4. HTML DOM 修改
5. HTML DOM shift键被按下了吗？
6. HTML DOM 导航节点关系
7. HTML DOM 返回加载的文档的服务器域名 实例
8. HTML DOM 返回当前的文件和链接的文档之间的关系

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);
}