单击选择元素时滚动到预定义选项不起作用答案

【问题标题】：Scroll to predefined option when clicked on select element does not work单击选择元素时滚动到预定义选项不起作用
【发布时间】：2021-06-16 00:51:05
【问题描述】：

当我单击选择以选择一个选项时，我希望选择框自动向下滚动以显示预定义的选项。此代码适用于 Internet Explorer，但不适用于 Chrome。它在 Chrome 中仅适用于多选。

$(document).ready(function() {
  $("#selectId").click(function() {
    $("#selectId").find("option[value='24']")[0].scrollIntoView();
  });
});

<select title="Title" data-header="select" id="selectId">
  <option selected disabled>Choose one</option>
  <option value="1">1 </option>
  <option value="2">2 </option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>
  <option value="22">22</option>
  <option value="23">23</option>
  <option value="24">24</option>
  <option value="25">25</option>
  <option value="26">26</option>
  <option value="27">27</option>
  <option value="28">28</option>
  <option value="31">31</option>
</select>
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>

【问题讨论】：

我不相信您尝试做的事情会在任何现代浏览器中运行。如果你需要这种行为，你需要使用一个库，它将原始的select 元素转换为 HTML，这可以允许更大的 UI 控制，例如 Select2
我什至无法让 IE 让我看到。它打开 Edge 并告诉我那里更好哈哈
@RoryMcCrossan 为我总结了这一点，您将操作系统 UI（选择选项不是网页的一部分，它们甚至可以出现在窗口之外）与 HTML 元素混合在一起。如果它像您所说的那样在 IE 中工作，我会非常感到惊讶。一个你可能没有想到的愚蠢选项，如果你只是选择你想要的选项，它会自动滚动到它<option value="24" selected="selected">24</option>。
@Djave 我不想在加载元素时选择选项 24，我希望在选择框中显示“选择一个”标题，然后在单击选择框时选择并自动滚动到选项 24. 选择选项不是网页的一部分是什么意思？它们可以作为 DOM HTMLOptionElement 对象进行操作
@RoryMcCrossan 如何使用 select2 实现所需的行为？

标签： html jquery google-chrome browser

【解决方案1】：

最后我以这种方式使用JQuery Select2 实现了这种行为：

$("#selectId").select2().on('select2:open', function() {
    $("#selectId").val("7").trigger('change');
    $("#selectId").off("select2:open");
});

【讨论】：