Javascript Chrome 中多选列表上的 jQuery 设置 prop("selected", true) 只能工作一次
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12734794/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery setting prop("selected", true) on multi select list in Chrome only works once
提问by kavun
When trying to set a select list option to selected in order to scroll the select list to that option, it works in all browsers except for Chrome. In Chrome it works once, but successive times do not work in Chrome. How can I ensure that setting the selected attribute of an option in a select list will scroll that option into view?
当尝试将选择列表选项设置为 selected 以便将选择列表滚动到该选项时，它适用于除 Chrome 之外的所有浏览器。在 Chrome 中它工作一次，但在 Chrome 中连续多次不起作用。如何确保在选择列表中设置选项的 selected 属性会将该选项滚动到视图中？
Here is an example of my issue - http://jsfiddle.net/Z2rQG/
这是我的问题的一个例子 - http://jsfiddle.net/Z2rQG/
The code I am using to select an option in a list to scroll it into to view is as follows:
我用来在列表中选择一个选项以滚动查看的代码如下：
(function ($) {
$.fn.scrollToOption = function (option) {
var _option = $(option, this);
// if option is in list
if(_option) {
// store the selection state
var isSelected = _option.is(":selected");
_option.prop("selected", true); // scroll to the option
_option.prop("selected", isSelected); // restore the selection state
}
return this;
};
})(jQuery);
Edit:I have also tried the scrollTojQuery plugin, which does not work as well in Chrome. Here is an example - http://jsfiddle.net/kavun/TW4XK/
编辑：我也尝试过scrollTojQuery 插件，它在 Chrome 中效果不佳。这是一个例子 - http://jsfiddle.net/kavun/TW4XK/
Edit:Here is a clearer example of what I am trying to do. Select two options from a select list and have the list be scrolled to the last selected option. This works in all browsers except Chrome and Safari. In Chrome the first selection scrolls to the option but the second $('#select option[value=""].prop('selected', true);does not scroll the list- http://jsfiddle.net/kavun/uhnZH/
编辑：这是我正在尝试做的一个更清晰的例子。从选择列表中选择两个选项，并将列表滚动到最后一个选择的选项。这适用于除 Chrome 和 Safari 之外的所有浏览器。在 Chrome 中，第一个选择滚动到选项，但第二个$('#select option[value=""].prop('selected', true);不滚动列表- http://jsfiddle.net/kavun/uhnZH/
回答by Tim Down
Browser behaviour is inconsistent with regard to which option is scrolled into view when multiple options are selected. However, selecting the option using its selectedproperty plus setting the selectedIndexproperty of the <select>element seems to make sure the select is scrolled to the right place in all major browsers. Using this, you can get the correct vertical scrolling, select the options you want and then scroll the select manually.
浏览器行为与在选择多个选项时滚动到视图中的选项不一致。但是，使用其selected属性选择选项并设置元素的selectedIndex属性<select>似乎可以确保选择在所有主要浏览器中滚动到正确的位置。使用它，您可以获得正确的垂直滚动，选择您想要的选项，然后手动滚动选择。
Opera does not seem to fully support scrollTopfor select elements, so this solution does not work in Opera.
Opera 似乎并不完全支持scrollTop选择元素，因此该解决方案在 Opera 中不起作用。
Demo: http://jsfiddle.net/uhnZH/10/
演示：http: //jsfiddle.net/uhnZH/10/
Code:
代码：
function selectAndScrollToOption(select, option) {
$select = $(select);
// Store the currently selected options
var $selectedOptions = $select.find("option:selected");
// Select the new option using its selected property and selectedIndex.
// This seems to make the select scroll to the desired place in all major
// browsers
option.selected = true; // Required for old IE
select.selectedIndex = option.index;
// Measure the vertical scrolling
var scrollTop = $select.scrollTop();
// Re-select the original options
$selectedOptions.prop("selected", true);
// Scroll to the correct place
$select.scrollTop(scrollTop);
}
回答by Kato
If your goal is simply to scroll to a value in the dropdown, you can simply use valas demonstrated in this updated fiddle:
如果您的目标只是滚动到下拉列表中的一个值，您可以简单地使用val此更新的小提琴中所演示的：
$('#selectList').val(51);
That will work in any browser.
这将适用于任何浏览器。
If you're trying to scroll to an element on the page based on the value in the dropdown, you'll have to put up an example that gets us a bit closer to what you want so we can address that specific scenario.
如果您尝试根据下拉列表中的值滚动到页面上的某个元素，则必须提供一个示例，使我们更接近您想要的内容，以便我们解决该特定情况。
