Javascript 选择列表滚动至特定选项元素

Javascript 选择列表滚动至特定选项元素,javascript,jquery,html,Javascript,Jquery,Html,我有一个带有年份的选择框。第一个选项为空。当我点击选择列表时,我希望滚动条自动向下滚动。我尝试过scrollTop,但它只在FireFox中起作用 例: 1911 1912 1913 1914 1915 1916 1917 1918 1919 1920 1921 1922 ... 试试下面的代码,希望能有所帮助 $("#mySelect").click(function(){ $(this).find("option").eq(someMiddleNumber).focus().blur

我有一个带有年份的选择框。第一个选项为空。当我点击选择列表时,我希望滚动条自动向下滚动。我尝试过scrollTop,但它只在FireFox中起作用

例:


1911
1912
1913
1914
1915
1916
1917
1918
1919
1920
1921
1922
...

试试下面的代码,希望能有所帮助

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

请尝试下面的代码,希望对您有所帮助

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

ShankarSangoli很接近,但我想你想要:

$("#mySelect").click(function(){
   $(this).find("option:last").attr("selected","selected");
});
$('#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); 
});

ShankarSangoli很接近,但我想你想要:

$("#mySelect").click(function(){
   $(this).find("option:last").attr("selected","selected");
});
$('#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); 
});

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

$("#mySelect").click(function(){
   $(this).find("option:last").attr("selected","selected");
});
$('#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); 
});

工作示例:

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

$("#mySelect").click(function(){
   $(this).find("option:last").attr("selected","selected");
});
$('#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); 
});

工作示例:

您可以尝试从css中删除样式“overflow-y:auto;”,这将使所选项目滚动到视图中(当您使用箭头键更改选择时)。

您可以尝试从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);
}

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


为什么不把日期的顺序颠倒过来?:)请再解释一下?是否希望下拉列表滚动到列表的底部?如果是这样,为什么不颠倒顺序,使最后一个在顶部?例如,我只想用400px向下滚动垂直滚动条,而不选择任何选项,因为我希望用户在选择选项之前看到选择列表中最重要的选项为什么不颠倒日期的顺序?:)请再解释一下好吗?是否希望下拉列表滚动到列表的底部?如果是,,为什么不颠倒顺序,使最后一个在顶部?我只想用400px向下滚动垂直滚动条,而不选择任何选项,因为我希望用户在选择选项之前看到选择列表中最重要的选项。这不是在选择中选择1922年的选项吗?@Phil-我解释了你的问题错误,但现在我编辑了我的答案,请检查。我只想用400px向下滚动垂直滚动条,但不选择任何选项,因为我希望用户在选择选项之前查看选择列表中最重要的选项。在这种情况下,选择任何中间选项并将焦点设置为它将滚动到该选项,但不会选择它。那不是在选择中选择1922'd选项吗?@Phil-我把你的问题解释错了,但现在我已经编辑了我的答案,请检查。我只想用400px向下滚动垂直滚动条,例如,而不选择任何选项,因为我希望用户在选择一个选项之前看到选择列表中最重要的选项选项在这种情况下,选择任何中间选项,并将焦点设置为它将滚动到该选项,但不会选择它。在我看来,这是迄今为止最好的解决方案。我只想以400px为例向下滚动垂直滚动条,而不选择任何选项,因为我希望用户在选择某个选项之前看到选择列表中最重要的选项选项我认为目前为止最好的解决方案。例如,我只想用400px向下滚动垂直滚动条,而不选择任何选项,因为我希望用户在选择选项之前看到选择列表中最重要的选项。例如,我只想用400px向下滚动垂直滚动条,而不选择任何选项因为我想让用户在选择选项之前查看选择列表中最重要的选项。我认为除了选择选项之外,没有其他方法可以移动滚动条。您可以将特殊类放在重要选项开始的选项上并执行:$(this.find(“.specialclass”).attr(“selected”、“selected”);例如,我只想用400px向下滚动垂直滚动条,而不选择任何选项,因为我希望用户在选择选项之前看到选择列表中最重要的选项。我认为除了选择选项之外,没有其他方法可以移动滚动条。您可以将特殊类放在重要选项开始的选项上并执行:$(this.find(“.specialclass”).attr(“selected”、“selected”);还不能评论:)我已经挣扎了几个小时,不得不作为附加答案发布。还不能评论:)我已经挣扎了几个小时,不得不作为附加答案发布。