参考资料

1. HTML DOM改变单元格的内容
2. HTML DOM 改变一个iframe的src
3. HTML DOM 返回image的longdesc属性的值
4. HTML DOM 返回页面上所有相对URL的基URL 实例
5. HTML DOM 修改
6. HTML DOM 返回一个iframe中的marginwidth属性的值
7. HTML DOM 返回图像映射的某个区域的protocol 实例
8. HTML DOM 返回一个button的name 实例

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