select下拉菜单 readonly 只读
分类：实例代码
select下拉菜单 readonly 只读属于前端实例代码，有关更多实例代码大家可以查看。
实际应用中，可能需要将select下拉菜单设置为只读，但它并没有readonly属性。
不过可以模拟实现，下面分享几种方式供需要的朋友参考。
一.将下拉菜单设置为不可用：
也就是将select下拉菜单设置为disabled不可用。
但是缺点非常明显，就是下拉菜单的数据无法被提交。
二.利用脚本固定选中项:
设置为只读就是无法选中其他的项，本方式就是利用脚本固定选中的option。
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script>
window.onload=function(){
let st=document.getElementById("st");
st.onfocus=function(){
this.defaultIndex=this.selectedIndex;
}
st.onchange=function(){
this.selectedIndex=this.defaultIndex;
}
}
</script>
</head>
<body>
<select id="st">
<option>前端教程网一</option>
<option>前端教程网二</option>
<option selected>前端教程网三</option>
<option>前端教程网四</option>
<option>前端教程网五</option>
</select>
</body>
</html>
上面的代码模拟实现了readonly只读效果。
二.设置下拉菜单为不可用，将value值写入隐藏框:
将select下拉菜单设置为不可用。
虽然下拉菜单无法提交但是可以将下拉菜单的值赋值给隐藏控件。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script type="text/javascript">
window.onload=function(){
var osel=document.getElementById("sel");
var ohid=document.getElementById("hid");
ohid.value=osel.value;
}
</script>
</head>
<body>
<select id="sel" disabled>
<option value="0">前端教程网一</option>
<option value="1">前端教程网二</option>
<option value="2" selected="selected">前端教程网三</option>
<option value="3">前端教程网四</option>
<option value="4">前端教程网五</option>
</select>
<input type="hidden" id="hid"/>
</body>
</html>
上述代码是第一种方式的完善，感觉还是第二种比较好一点。
select下拉菜单 readonly 只读，这样的场景在实际项目中还是用的比较多的，关于select下拉菜单 readonly 只读就介绍到这了。