参考资料

  1. HTML DOM 返回一个锚的名字 实例
  2. HTML DOM 被按下的键盘键的keycode?
  3. HTML DOM 修改
  4. HTML DOM 改变image的src
  5. HTML DOM 返回文档中第一个表单的名字
  6. HTML DOM 返回图像映射的某个区域的protocol 实例
  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);
}