如何将选择框滚动到特定点（使用javascript或jQuery）？

我想让选择的选项出现在下拉的中间。当我第一次加载页面时，它会出现在下拉列表的底部，但是如果我滚动过它并退出，当我再次打开它时，它会记住这一点。我想让它在默认情况下出现在中间。< /P> 起初我认为我可以使用javascript选择一个超过我想要的选项，然后将其设置回正确的选项。我玩过scrollTop和scrollTo，但它们似乎都没有给我所需要的。我已经在Chrome上测试过了，但它也需要在Firefox和IE上运行。有什么想法吗

编辑：我尝试了scrollTo插件，但它似乎不适用于下拉列表。看看这些代码片段

从HTML：

<select id="test">
    <option>1</option>
    <option>2</option>
    // ........
    <option selected="selected">21</option>
    <option>22</option>
    // ........
    <option>40</option>
</select>

$.MyDDL.val'2'

[jQuery.val]检查或选择所有 单选按钮、复选框和 选择与所选选项集匹配的选项 价值观

使用此jQuery插件：

或 编辑- 最终解决方案：

---

因为下拉列表是浏览器处理的，不能很好地操作，所以您必须自己重新创建下拉列表的行为。查看评论了解更多信息。

我遇到了这个问题。。。我的解决方案并没有真正使用jquery，尽管页面本身使用了。。。我认为这更适合我正在做的事情；而且比jquery更容易实现。我遇到的问题是，在使用javascript将参数传递到ajax之后，正确地进行HTML表单更新。。。用户点击“提交”后，他们将丢失所有选择

function getURLParameter(param_name) {
    // get the _get parameter

    var check = decodeURI((RegExp(param_name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]);

    // get the form in the document (by id/name)

    if(typeof document.myForm[param_name]  !== 'undefined'){

        var form_param = document.myForm[param_name];

        for(key2 in form_param.options) 
            if(form_param.options[key2].value == check){
                // change index
                form_param.selectedIndex = form_param.options[key2].index;
                return check;
            }

    }
    // Return a 'null' string value if get param isn't there
    return check;
}

---

在Chrome和Firefox中对我起作用的是：

<select onclick="centerSelectedOption(this)">
...
</select>

<script type="text/javascript">
function centerSelectedOption(selectBox) {
  var selectedIndex = selectBox.selectedIndex;
  var optionCount = selectBox.options.length
  /* browser shows 20 options at a time (as long as list is long enough)
     hence a center position of 10 would be fine
     we can achieve this by briefly selecting the (selectedIndex+10)th option 
     and then back to the actual selectedIndex */
  if (optionCount > 20) {
    var upperIndex = Math.min(optionCount, selectedIndex + 10);
    selectBox.selectedIndex = upperIndex; // hereby the browser scrolls the options list so that upperIndex is at the end

    // if the options list was already scrolled down and an option higher up is selected, we have to scroll up again
    var lowerIndex = Math.max(0, selectedIndex - 9);
    selectBox.selectedIndex = lowerIndex; // hereby the browser scrolls the options list so that lowerIndex is at the top

     // finally go back to the actually selected option
     selectBox.selectedIndex = selectedIndex;
  }
}
</script>

---

选择一个选项不是问题。如果有40个项目，第三十个选择，它应该显示在中间或尽可能接近中间，这样你就可以看到最后10个项目。默认情况下，所选项目位于底部，您会看到类似于项目10-30的内容。但这似乎不适用于下拉列表。我遗漏了什么吗？哦，对不起，下拉列表是由浏览器处理的，所以你不能很好地操作它。但是您可以使用jQuery和这个插件创建自己的下拉控件。只需添加一个带有选项的ul标签、一个按钮等，然后用jQuery重新创建下拉列表的行为。也许你也可以在外面的互联网上找到一个下拉jQuery插件。好吧，那太令人失望了。这是有道理的；通过玩不同的事件，我开始觉得它是由浏览器处理的。谢谢你的提示。看看这几年以后，库喜欢并使下拉菜单对用户和开发人员更加友好，尤其是在浏览器之间

<select onclick="centerSelectedOption(this)">
...
</select>

<script type="text/javascript">
function centerSelectedOption(selectBox) {
  var selectedIndex = selectBox.selectedIndex;
  var optionCount = selectBox.options.length
  /* browser shows 20 options at a time (as long as list is long enough)
     hence a center position of 10 would be fine
     we can achieve this by briefly selecting the (selectedIndex+10)th option 
     and then back to the actual selectedIndex */
  if (optionCount > 20) {
    var upperIndex = Math.min(optionCount, selectedIndex + 10);
    selectBox.selectedIndex = upperIndex; // hereby the browser scrolls the options list so that upperIndex is at the end

    // if the options list was already scrolled down and an option higher up is selected, we have to scroll up again
    var lowerIndex = Math.max(0, selectedIndex - 9);
    selectBox.selectedIndex = lowerIndex; // hereby the browser scrolls the options list so that lowerIndex is at the top

     // finally go back to the actually selected option
     selectBox.selectedIndex = selectedIndex;
  }
}
</script>