設定select下拉選單readonly只讀

admin發表於2017-12-04

實際應用中，可能需要將select下拉選單設定為只讀，但它並沒有readonly屬性。

不過可以模擬實現，下面分享幾種方式供需要的朋友參考。

一.將下拉選單設定為不可用：

也就是將select下拉選單設定為disabled不可用。

但是缺點非常明顯，那麼就是下拉選單的資料無法被提交。

二.利用指令碼固定選中項:

設定為只讀就是無法選中其他的項，本方式就是利用指令碼固定選中的option。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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下拉選單設定為不可用。

雖然下拉選單無法提交但是可以將下拉選單的值賦值給隱藏控制元件。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

上述程式碼是第一種方式的完善，感覺還是第二種比較好一點。

相關文章