Select 列表滾動到特定的選項元素

Question

我有一個多年的 select 盒子。 第一個選項為空。 當我單擊 select 列表時，我希望滾動條自動向下滾動。 我試過使用 scrollTop 但它只在 FireFox 中工作。

前任：

<select id="mySelect">
<option selected="selected" value=""></option>
<option value="1911">1911</option>
<option value="1912">1912</option>
<option value="1913">1913</option>
<option value="1914">1914</option>
<option value="1915">1915</option>
<option value="1916">1916</option>
<option value="1917">1917</option>
<option value="1918">1918</option>
<option value="1919">1919</option>
<option value="1920">1920</option>
<option value="1921">1921</option>
<option value="1922">1922</option>
...

</select>

Answer 1

實際上，Select 點擊/聚焦有點復雜。 這就是你想要的：

$('#mySelect').focus(function(){

    if($(this).data('focused') !==  true)
    {
        $(this).data('focused',true);  
        $(this).children(':last-child').prop('selected',true);
    }

});

$('#mySelect').blur(function(){
    $(this).data('focused',false); 
});

工作示例： http://jsfiddle.net/AlienWebguy/zuJrK/

Answer 2

您可以嘗試刪除樣式“overflow-y:auto;” 從 css 開始，這將使所選項目滾動到視圖中（當您使用箭頭鍵更改選擇時）。

Answer 3

AlienWebguy 回答的一些改進：

您可以通過添加下面的 settimeout 部分來確保默認值將保持選中，以防用戶不進行任何更改：

if($(this).data('focused') !==  true)
{
    $(this).data('focused',true);  
    $(this).children(':last-child').prop('selected',true);
    // dirty workaround
    window.setTimeout(function(){
        $(this).val("");
    }, 50);
}

Answer 4

試試下面的代碼，希望對你有幫助

$("#mySelect").click(function(){
   $(this).find("option").eq(someMiddleNumber).focus().blur();
});

Answer 5

ShankarSangoli 很接近，但我認為你想要：

$("#mySelect").click(function(){
   $(this).find("option:last").attr("selected","selected");
});