IE10中下拉框 title被遮擋以及部分option無法顯示的問題
阿新 • • 發佈:2019-01-25
在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>
注意:程式碼只作為參考,拿去用的話還得自己改改部分內容。