固定寬度下拉清單中option内容顯示不全問題解決方法

不少時候在頁面中為了布局的需要，下拉清單<select>的寬度需要設成比較小的值，這時如果恰巧它包含的選擇項<option>的内容比較長，那麼超出select寬度的部分将會被截斷，如果option顯示的内容又比較重要，必須完整地展現出來，或者你是個完美主義者，那這就成了一個不大不小的問題了。

在IE7+、Firefox中，由于支援了<option>的title屬性，我們可以想辦法給option标記設定title屬性（内容可以與顯示的值相同或者不同）。如果是已經做好的頁面，不想再做太多改動，可以用下面的腳本，自動周遊頁面上的所有<select>，給所有的option加上與text相同的title。

function SetOptionTitle()
{
    var selects = document.getElementsByTagName("select");
    if (selects.length > 0)
    {
        for (var i = 0; i < selects.length; i++)
        {
            var options = selects[i].options;
            if (selects[i].options.length > 0)
            {
                for (var j = 0; j < options.length; j++)
                {
                    if (options[j].title == "")
                        options[j].title = options[j].text;
                }
            }
        }
    }
}
           

很不幸的是，IE6并不支援<option>的title屬性，這一方法在IE6下完全無效！鑒于目前的浏覽器市場狀況，我們還不得不盡力相容IE6，是以隻能另想其它辦法。

我目前想到的辦法是：當滑鼠懸停到<select>時，建立一個這個下拉清單的副本，同時把焦點移到這個副本上，把副本的樣式設成絕對定位，而且蓋在原來的下拉清單上，寬度根據option的顯示内容自動拉伸，當這個副本失去焦點，或者使用者對它進行了選擇操作後，擷取副本的selectedIndex，賦給原來的select對象。具體代碼如下：