选择列表滚动到特定的选项元素

Select list scroll to a specific option element

本文关键字：选项 元素 列表 滚动 选择      更新时间：2023-09-26

我有一个带有年份的选择框。第一个选项为空。当我点击选择列表时，我希望滚动条自动向下滚动。我试过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>

选择点击/聚焦实际上有点复杂。这就是你想要的:

$('#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/

试试下面的代码，希望对你有帮助

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

您可以尝试从css中删除样式"overflow-y:auto;"，该样式将保持所选项目滚动到视图中(当您使用方向键更改选择时)。

对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);
}

ShankarSangoli很接近，但我认为你想:

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