向下滚动到使用jQuery单击按钮时选择的选项 [英] Scroll down to selected option on button click using jquery
本文介绍了向下滚动到使用jQuery单击按钮时选择的选项的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个这样的国家/地区列表:
I have a list of countries like this:
该列表非常广泛.我需要单击按钮才能将(焦点)移至指定的国家/地区.
The list is very extensive. I need to be able on a button click to move (focus) to the specified country.
StackOverflow中有很多线程,但是没有一个起作用.例如,我尝试过:
There are many threads in StackOverflow but none of them worked. For example I tried this:
var code = 40;
$('#id_resource-regions').val(code).scrollTop(160);
开发人员工具中没有响应,也没有错误/警告. 请注意,该列表是使用Django表单和模板创建的.
There is no response and no error/warnings in the developers tool. Note that the list is created using django forms and templates.
推荐答案
- 选择要查找的
option
元素. - 使用 .offset() 获得偏移量的最高位置选定的选项元素.
- 获取select元素的偏移量顶部.
- 使用 .scrollTop() 滚动到所需的选项.
- Select the
option
element you are looking for. - Get the offset top position using .offset(), of the selected option element.
- Get the offset top of the select element.
- Use .scrollTop() to scroll to the desired option.
这是一个例子
var btn = $('button')
var select = $('select')
btn.on('click', function() {
var option = select.find("option:contains('item-30')");
var optionTop = option.offset().top
var selectTop = select.offset().top;
select.scrollTop(select.scrollTop() + (optionTop - selectTop));
option.prop('selected', true)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="select" multiple="multiple">
<option value="">item-1</option>
<option value="">item-2</option>
<option value="">item-3</option>
<option value="">item-4</option>
<option value="">item-5</option>
<option value="">item-6</option>
<option value="">item-7</option>
<option value="">item-8</option>
<option value="">item-9</option>
<option value="">item-10</option>
<option value="">item-11</option>
<option value="">item-12</option>
<option value="">item-13</option>
<option value="">item-14</option>
<option value="">item-15</option>
<option value="">item-16</option>
<option value="">item-17</option>
<option value="">item-18</option>
<option value="">item-19</option>
<option value="">item-20</option>
<option value="">item-21</option>
<option value="">item-22</option>
<option value="">item-23</option>
<option value="">item-24</option>
<option value="">item-25</option>
<option value="">item-26</option>
<option value="">item-27</option>
<option value="">item-28</option>
<option value="">item-29</option>
<option value="">item-30</option>
<option value="">item-31</option>
<option value="">item-32</option>
<option value="">item-33</option>
<option value="">item-34</option>
<option value="">item-35</option>
<option value="">item-36</option>
<option value="">item-37</option>
<option value="">item-38</option>
<option value="">item-39</option>
<option value="">item-40</option>
</select>
<button>move to item 30</button>
这篇关于向下滚动到使用jQuery单击按钮时选择的选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文