设置select菜单禁止选择或选择无效 旧城等待， 2023-06-19 02:51 1阅读 0赞 # 一、disabled属性 # 在select上设置disabled="disabled"，即可将下拉菜单变为只读状态，不可选择，点击也无效。 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="jquery-3.4.1.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>小白网页</title> </head> <body onLoad="HideWeekMonth()"> <div id="test"> <p class="invisible">评价小白：</p> <select id="evaluate" name="evaluate" disabled="disabled" data-options="height:24,width:80"> <option value="0">棒！</option> <option value="1">很棒！</option> <option value="2">非常棒！</option> <option value="3">不许说不棒！</option> <option value="5">棒棒棒棒棒…！</option> </select> </div> </body> </html> 注：这种方法会导致提交 form 表单时，select的值无法传递，提交前需移除disabled属性 $("#evaluate").removeAttr("disabled"); 或 var evaluate=document.getElementById('evaluate'); evaluate.removeAttr("disabled"); 添加disable属性可用： $("#evaluate").attr("disabled","disabled"); # 二、设置选择无效 # <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="jquery-3.4.1.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>小白网页</title> </head> <body onLoad="HideWeekMonth()"> <div id="test"> <p class="invisible">评价小白：</p> <select id="evaluate" name="evaluate" data-options="height:24,width:80" onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;"> <option value="0">棒！</option> <option value="1">很棒！</option> <option value="2">非常棒！</option> <option value="3">不许说不棒！</option> <option value="5">棒棒棒棒棒…！</option> </select> </div> </body> </html> 这种方法可以看到select选项，是通过配置 onfocus 和 onchange 让用户选择失效，只认默认值。
还没有评论，来说两句吧...