时间戳

首页 > 解决方案 > 单击选择元素时滚动到预定义选项不起作用

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

问题描述

当我单击选择以选择一个选项时，我希望选择框自动向下滚动以显示预定义的选项。此代码适用于 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>

标签： htmljquerygoogle-chromebrowser

解决方案

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

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

推荐阅读