1. 程式人生 > >IE10中下拉框 title被遮擋以及部分option無法顯示的問題

IE10中下拉框 title被遮擋以及部分option無法顯示的問題

在IE10和IE11中,選中下拉框最下方的資料項,滑鼠盤旋在下拉框各個選項上,發現選中焦點上方的選項無法提示title;在IE10中option的title容易被下拉框覆蓋。當然這些顯示問題在chrome中並不存在哭

解決方法:1. 每次將選中條目置於下拉框第一個位置,這樣其他所有條目都可以顯示title;2. 由於在ie10中提示的title容易被下拉框覆蓋,加zIndex屬性設定option絕對高度即可。當然還可以自己自定義select,不過這樣比較麻煩。選中option時,建立一個新的select,並註冊onchenge事件(ie中只支援attachEvent,不支援addEventListener),然後該option置於首個位置,最後新增newSelect再刪除原select。具體程式碼如下:

function getNewOption(selectedOp) {
		var newOp = document.createElement("OPTION");
		newOp.value= selectedOp.value;
		newOp.text = selectedOp.text;
		newOp.title = selectedOp.title;
		newOp.style.zIndex = 1;
		return newOp;
	}
	function setFirstOpt() {
		var papercodeSe = document.getElementById("paperCode");
		var newSelect = document.createElement("select");
		//給newSelect繫結onchange事件
		newSelect.attachEvent('onchange', setFirstOpt);
		newSelect.id = papercodeSe.id;
		newSelect.name = papercodeSe.name;
		var selectIndex = papercodeSe.selectedIndex;
		var selectedOp = papercodeSe.options[selectIndex];
		//將選中option放入newSelect首位
		newSelect.add(getNewOption(selectedOp));
		papercodeSe.remove(selectIndex);
		for (var i = 0;i < papercodeSe.length;i++) {			
newSelect.add(getNewOption(papercodeSe.options[i]));
		}
		//新增newSelect後刪除原select
		papercodeSe.parentNode.appendChild(newSelect);
		papercodeSe.parentNode.removeChild(papercodeSe);
	}
html下拉框如下:
<select name="paperCode" id="paperCode" onchange="setFirstOpt();">
	<c:forEach items="${listPaperCode}" var="paperCode">
		<option style="z-index: 1" title="${paperCode.colDescriptionDetail}" <span style="font-family: Arial, Helvetica, sans-serif;">value="${paperCode.pkPapercode}"></span>
	${paperCode.pkPapercode}-${paperCode.colDesc}</option>
	</c:forEach>
</select>

注意:程式碼只作為參考,拿去用的話還得自己改改部分內容。