参考资料

1. HTML DOM 返回文档中的所有cookies的名称/值对 实例
2. HTML DOM 返回一个表单中所有元素的value 实例
3. HTML DOM 返回图像映射的某个区域的target的值 实例
4. HTML DOM改变表格的cellpadding和cellspacing
5. HTML DOM一个行的innerHTML
6. HTML DOM 用指定的ID弹出一个元素的innerHTML实例
7. HTML DOM 返回一个区域的href属性的querystring部分 实例
8. HTML DOM 返回加载的当前文档的URL实例

HTML DOM 禁用和启用下拉列表

详细介绍

HTML DOM 提供了禁用和启用下拉列表（<select>元素）的功能。禁用下拉列表会阻止用户与其交互，通常显示为灰色状态。

相关标签

主要使用 <select> 元素：

<select id="mySelect">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
</select>

用法

通过 JavaScript 操作 DOM 来禁用或启用下拉列表：

禁用下拉列表

document.getElementById("mySelect").disabled = true;

启用下拉列表

document.getElementById("mySelect").disabled = false;

实例

<select id="fruitSelect">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
</select>

<button onclick="disableSelect()">禁用下拉列表</button>
<button onclick="enableSelect()">启用下拉列表</button>

<script>
function disableSelect() {
  document.getElementById("fruitSelect").disabled = true;
}

function enableSelect() {
  document.getElementById("fruitSelect").disabled = false;
}
</script>

功能

• 阻止用户选择或更改下拉列表中的选项

• 常用于表单验证或条件交互

• 禁用状态会阻止表单提交该字段的值

CSS 扩展

可以为禁用的下拉列表添加样式：

select:disabled {
  background-color: #f0f0f0;
  color: #a0a0a0;
  cursor: not-allowed;
  border: 1px solid #ccc;
}

/* 也可以使用属性选择器 */
select[disabled] {
  opacity: 0.7;
}