用js設(shè)置下拉框?yàn)橹蛔x的小技巧
更新時(shí)間：2014年04月10日 15:35:45 作者：
select沒(méi)有只讀屬性，所以需要在select外面包含一個(gè)span，通過(guò)js來(lái)改變,需要的朋友可以參考下
在項(xiàng)目開(kāi)發(fā)過(guò)程中我們時(shí)常會(huì)碰到要設(shè)置下拉框?yàn)橹蛔x（readonly），但是可惜的是select沒(méi)有只讀屬性，所以需要在select外面包含一個(gè)span，通過(guò)js來(lái)改變。
下面這段html代碼是在struts2的下拉標(biāo)簽中加入了span標(biāo)簽，在頁(yè)面裝載的時(shí)候就讓下拉框變成不可讀。
<body onload="init()">
<span id="id_select">
<s:select name="sjdwmc" list="sjdxdwList" listKey="dxbh" listValue="dwmc" headerKey="" headerValue=""></s:select>
</span>
</body>
如下是js代碼，在init方法中調(diào)用selectReadOnly讓下拉框變成只讀。
/*根據(jù)頁(yè)面上span的id設(shè)置select為只讀/
function selectReadOnly(selectedId){
var obj = document.getElementById(selectedId);
obj.onmouseover = function(){
obj.setCapture();
}
obj.onmouseout = function(){
obj.releaseCapture();
}
obj.onfocus = function(){
obj.blur();
}
obj.onbeforeactivate = function(){
return false;
}
}
function init(){
selectReadOnly("id_select");
}
做到這里大功告成，試試效果吧?。?！
下面這段html代碼是在struts2的下拉標(biāo)簽中加入了span標(biāo)簽，在頁(yè)面裝載的時(shí)候就讓下拉框變成不可讀。
復(fù)制代碼 代碼如下:
<body onload="init()">
<span id="id_select">
<s:select name="sjdwmc" list="sjdxdwList" listKey="dxbh" listValue="dwmc" headerKey="" headerValue=""></s:select>
</span>
</body>
如下是js代碼，在init方法中調(diào)用selectReadOnly讓下拉框變成只讀。
復(fù)制代碼 代碼如下:
/*根據(jù)頁(yè)面上span的id設(shè)置select為只讀/
function selectReadOnly(selectedId){
var obj = document.getElementById(selectedId);
obj.onmouseover = function(){
obj.setCapture();
}
obj.onmouseout = function(){
obj.releaseCapture();
}
obj.onfocus = function(){
obj.blur();
}
obj.onbeforeactivate = function(){
return false;
}
}
function init(){
selectReadOnly("id_select");
}
做到這里大功告成，試試效果吧?。?！
您可能感興趣的文章:
- JS控制文本域只讀或可寫(xiě)屬性的方法
- JavaScript對(duì)象類(lèi)型轉(zhuǎn)換的分類(lèi)及步驟詳解
- JavaScript數(shù)學(xué)對(duì)象Math操作數(shù)字的方法
- JavaScript數(shù)學(xué)對(duì)象之?dāng)?shù)字進(jìn)制轉(zhuǎn)換
- JavaScript時(shí)間對(duì)象Date內(nèi)置構(gòu)造函數(shù)操作實(shí)例
- JavaScript時(shí)間對(duì)象之常用方法的設(shè)置實(shí)例
- JavaScript實(shí)現(xiàn)給對(duì)象添加一個(gè)只讀屬性
相關(guān)文章
微信小程序?qū)崿F(xiàn)翻牌抽獎(jiǎng)動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)翻牌抽獎(jiǎng)動(dòng)畫(huà)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
本篇文章主要介紹了微信小程序?qū)崿F(xiàn)圖片懶加載的示例代碼，實(shí)現(xiàn)的原理是通過(guò)頁(yè)面預(yù)加載圖片，對(duì)用戶體驗(yàn)度會(huì)有一定的提高，具有一定的參考價(jià)值，有興趣可以了解一下2017-12-12![用xhtml+css寫(xiě)的相冊(cè)自適應(yīng) - 類(lèi)似九宮格[兼容 ff ie6 ie7 opear ]](http://img.jbzj.com/images/xgimg/bcimg2.png)
用xhtml+css寫(xiě)的相冊(cè)自適應(yīng) - 類(lèi)似九宮格[兼容 ff ie6 ie7 opear ]
用xhtml+css寫(xiě)的相冊(cè)自適應(yīng) - 類(lèi)似九宮格[兼容 ff ie6 ie7 opear ]...2007-05-05
30分鐘快速入門(mén)掌握ES6/ES2015的核心內(nèi)容（上）
ES6增加了很多新的語(yǔ)法，很多同學(xué)學(xué)習(xí)起來(lái)感覺(jué)很別扭，有時(shí)候也不理解新增加的語(yǔ)法有什么用，對(duì)ES6的學(xué)習(xí)也沒(méi)有興趣進(jìn)而動(dòng)力不足、學(xué)習(xí)效率不高。下面這篇文章將通過(guò)30分鐘帶大家快速入門(mén)掌握ES6/ES2015的核心內(nèi)容，需要的朋友可以參考下。2018-04-04
使用Curl命令查看請(qǐng)求響應(yīng)時(shí)間方法
curl命令查看請(qǐng)求響應(yīng)時(shí)間的方法非常簡(jiǎn)單，今天小編抽空給大家介紹下使用Curl命令查看請(qǐng)求響應(yīng)時(shí)間方法，感興趣的朋友一起看看吧2016-11-11
javascript中的offsetWidth、clientWidth、innerWidth及相關(guān)屬性方法
這篇文章主要介紹了javascript中的offsetWidth、clientWidth、innerWidth及相關(guān)屬性方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
Javascript面象對(duì)象成員、共享成員變量實(shí)驗(yàn)
Javascript 面象對(duì)象成員、共享成員變量實(shí)驗(yàn)，需要的朋友可以參考下。2010-11-11
JS使用canvas中的measureText方法測(cè)量字體寬度示例
這篇文章主要介紹了JS使用canvas中的measureText方法測(cè)量字體寬度,結(jié)合實(shí)例形式分析了canvas的measureText方法相關(guān)使用技巧,需要的朋友可以參考下2019-02-02
實(shí)例分析JS中的相等性判斷===、 ==和Object.is()
這篇文章主要給大家介紹了關(guān)于JS中相等性判斷===、 ==和Object.is()的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
js實(shí)現(xiàn)json數(shù)據(jù)行到列的轉(zhuǎn)換的實(shí)例代碼
為了實(shí)現(xiàn)這樣的數(shù)據(jù)顯示出來(lái)三個(gè)序列，分別為鄭州、新鄉(xiāng)、安陽(yáng)的電量，就需要自己實(shí)現(xiàn)對(duì)這樣數(shù)據(jù)的轉(zhuǎn)換，轉(zhuǎn)換成如下的形式：2013-08-08