HTML
一、基础用法
HTML
readonly：表示下拉列表框只读，即不能编辑选择框内容disabled：表示下拉列表框禁用，即不能编辑选择框内容，也不能进行选择操作；而且一些浏览器中还会显示灰色的字体，以表示该控件被禁用了
在HTML代码中，设置readonly属性即可禁用下拉列表框的编辑。以下示例展示如何禁用具有两个选项的下拉列表框：
<select name="fruit" readonly> <option value="apple">Apple</option> <option value="banana">Banana</option> </select>
上述代码中，readonly属性被设置在<select>标签上，使得此时用户无法通过键盘更改选项。
二、使用JavaScript实现
如果我们需要根据某些条件动态控制<select>标签的readonly属性，我们可以使用JavaScript来实现。
以下示例展示如何使用JavaScript禁用下拉列表框“fruit”：
<select name="fruit" id="fruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</select>
<script>
document.getElementById("fruit").setAttribute("readonly", "readonly");
</script>
上述代码中，当文档加载完成时，setAttribute()方法将readonly属性设置为"readonly"，使得用户无法更改下拉列表框的选项。
三、CSS实现
我们还可以使用CSS来实现<select>标签的readonly效果。
以下示例展示如何使用CSS禁用下拉列表框“fruit”：
<select name="fruit" id="fruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</select>
<style>
#fruit {
pointer-events: none;
color: #aaa;
}
#fruit option {
color: #000;
}
</style>
上述代码中，使用CSS的pointer-events:none属性禁用了鼠标事件，使得用户不能通过鼠标选中下拉列表框中的选项。同时，将<select>标签的颜色设置为灰色，让用户知道该控件已经被禁用了。为了避免选项也变成灰色，我们还需要将option标签的颜色设置回黑色。
四、禁用指定选项
有时候，我们需要禁用下拉列表框中的某个选项，但其他选项仍可以编辑或选择，这种情况下，可以将被禁用的选项设置为disabled，而不是使用readonly属性。
以下示例展示如何禁用“banana”这个选项：
<select name="fruit"> <option value="apple">Apple</option> <option value="banana" disabled>Banana</option> <option value="lemon">Lemon</option> </select>
上述代码中，将“banana”这个选项的disabled属性设置为true，表示该选项被禁用，其他选项不受影响。