如何使用JavaScript或jQuery将选择框滚动到特定位置？

Question

我希望在下拉列表中使所选选项出现在中间。当我第一次加载页面时，它出现在下拉列表底部，但如果我滚动并退出它，再次打开它时，它会记住我的选择。我希望默认情况下将其显示在中间。

起初，我认为我可以只使用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>

来自Javascript:

$(function() {
    alert( $('#test option:selected').next().text() ); // alerts 22
    $().scrollTo('#test'); // scrolls the screen to the drop-down
    $('#test').scrollTo( $('#test option:selected').next() ); //does nothing
});

- redbmk

Answer 1

请使用这个jQuery插件：http://plugins.jquery.com/project/ScrollTo

• 文档
• 演示1 或 演示2

编辑 - 最终解决方案： 因为下拉列表是由浏览器处理的，无法很好地操纵，所以您必须自己重新创建下拉列表的行为。有关更多信息，请参见评论。

- Arxisos

---

这似乎对下拉列表不起作用。我有什么遗漏吗？ - redbmk

哦，抱歉，下拉列表是由浏览器处理的，所以你不能很好地操纵它。但是你可以使用jQuery和这个插件创建自己的下拉控件。只需添加一个带有选项、按钮等的ul标签，并使用jQuery重新创建下拉列表的行为。也许你还可以在互联网上找到一个下拉式jQuery插件。 - Arxisos

嗯，那很令人失望。不过这很有道理；通过尝试不同的事件，我开始有了这种印象（它由浏览器处理）。感谢你的建议。 - redbmk

多年后再看，像select2和selectize这样的库使得下拉菜单在不同浏览器之间更加用户友好和开发者友好。 - redbmk

Answer 2

对我有效的方法（在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>

- user3270059

Answer 3

我遇到了这个问题...我的解决方案并没有真正使用jquery（尽管页面本身使用了jquery...）我认为这更适合我正在做的事情；而且比jquery更容易实现。我遇到的问题是，在javascript用于获取_GET参数以传递给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;
}

- redcap3000

Answer 4

$(".MyDDL").val('2');

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

- BentOnCoding

---

选择选项并不是问题。如果有40个项目，且选择了第30个项目，则应该在中间显示（或尽可能靠近中间），以便您可以看到最后10个项目。默认情况下，所选项目位于底部，您会看到类似于项目10-30的内容。 - redbmk