您當(dāng)前位置：首頁 > web前端 > jscript > IE6下javascript不能隱藏select標(biāo)簽的bug

IE6下javascript不能隱藏select標(biāo)簽的bug

來源：程序員人生發(fā)布時間：2013-10-22 04:39:21 閱讀次數(shù)：3454次

昨天做了一個簡單的項目，要求有三級聯(lián)動的select菜單，可是傷不起的IE6下就出現(xiàn)了不能隱藏select的bug，之前我也介紹過IE6下select層高的問題，可以通過隱藏select或者使用iframe遮擋的方式來解決，今天的bug不同以前，大家如果在用js控制select顯示隱藏的時候可能會經(jīng)常遇到，調(diào)試一下午終于找到了解決的方案，特此記錄一下。

IE6不能隱藏select重現(xiàn)代碼

建立兩個關(guān)聯(lián)的select，通過javascript控制第一個select 發(fā)生變化后，第二個select根據(jù)第一個value重新添加options，如果為空則隱藏第二個select(示例中判斷除第一個之外都隱藏)，則由第一個select的第三個value切換到第二個value則第二個select就不會隱藏。

具體效果見下面的實(shí)例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><title>IE6 select 隱藏 bug</title></head><body><select name="bug" id="select1" onchange="change(this.value)"><option value="app1">IE6</option><option value="app2">尼瑪</option><option value="app3">傷不起</option></select><select name="bug" id="select2"></select><style type="text/css">.hide{display:none;}</style><script type="text/javascript">var types = {app1:{name:'test',value:"test1",item:[{name:"bug"},{name:"IE6"},{name:"傷不起"}]},app2:{name:'BUG',value:"test2",item:[{name:"IE6出現(xiàn)bug鳥"},{name:"有木有"},{name:"傷不起"}]},app3:{name:'IE6',value:"test3",item:[{name:"腫么了"},{name:"bug"},{name:"尼瑪"}]}},select1 = document.getElementById('select1'),select2 = document.getElementById('select2');function change(val){var items = types[val].item;addOptions(select2,items);if(val==='app1'){select2.style.display = "";//select2.className = '';}else{//select2.style.display = "";select2.style.display = "none";//select2.className = 'hide';}}function addOptions(dom,items){dom.innerHTML = '';for(var i = 0, len = items.length; i< len; i++){var opt = document.createElement('option');opt.value = 0;opt.text = items[i].name;dom.add(opt);}}</script></body></html><br /><center>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網(wǎng)頁代碼：<a href='http://www.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></center>
提示：可修改后代碼再運(yùn)行!

IE6下不能隱藏select標(biāo)簽解決方案

可以通過先設(shè)置select為顯示，后設(shè)置為none的方式

通過給select添加class來控制顯示

具體方法，見上邊示例代碼源碼注釋的地方。

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈
程序員人生