Блог

Главная - Вопросы по программированию - Прокрутка до предопределенной опции при нажатии на «Выбрать элемент» не работает

Прокрутка до предопределенной опции при нажатии на «Выбрать элемент» не работает

#html #jquery #google-chrome #browser

Вопрос:

Когда я нажимаю на кнопку выбрать, чтобы выбрать опцию, я хочу, чтобы поле выбора автоматически прокручивалось вниз, чтобы отобразить предопределенную опцию. Этот код работает в 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>

Комментарии:

1. Я не верю, что то, что вы пытаетесь сделать, будет работать в любом современном браузере. Если вам нужно такое поведение, вам нужно будет использовать библиотеку, которая преобразует исходный select элемент в HTML, что может обеспечить гораздо больший контроль пользовательского интерфейса, например Select2

2. Я даже не могу заставить IE позволить мне это увидеть. Он открывает край и говорит мне, что там лучше, лол

3. @RoryMcCrossan подводит итог для меня, вы смешиваете пользовательский интерфейс операционной системы (параметры выбора не являются частью веб-страницы, они могут даже отображаться за пределами окна) с элементами HTML. Я очень удивлен, если это работает так, как вы говорите, в IE. Глупый вариант, о котором вы, возможно, не подумали, если вы просто выберете нужный вариант, он автоматически переключится на него <option value="24" selected="selected">24</option> .

4. @Djave Я не хочу, чтобы опция 24 была выбрана при загрузке элемента, я хочу, чтобы заголовок «Выбрать один» отображался в поле выбора, а затем, когда будет нажата кнопка «Выбрать», выберите и автоматически прокрутите до опции 24. Что вы имеете в виду, говоря, что выбранные параметры не являются частью веб-страницы? Ими можно управлять как объектами DOM HTMLOptionElement

5. @RoryMcCrossan как будет достигнуто желаемое поведение с помощью select2?

Ответ №1:

Наконец, я добился такого поведения, используя jQuery Select2 таким образом:

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