向下滾動到使用jQuery

按鈕點擊選中的選項我的國家的名單如下：向下滾動到使用jQuery

這份名單是非常廣泛的。我需要點擊按鈕才能將焦點移動到指定的國家/地區。

StackOverflow中有很多線程，但都沒有工作。例如，我想這：

var code = 40; 
$('#id_resource-regions').val(code).scrollTop(160);

沒有反應，沒有錯誤/在開發工具警告。請注意，該列表是使用django表單和模板創建的。

來源

2017-07-26 user1919

您嘗試的代碼有你展示HTML下沒有意義。沒有id's'的元素。選擇ID是'id_resource-regions'。作爲開發人員提示，當您複製某些東西時，請嘗試閱讀每一行並理解其每一部分的含義。這樣你就不會因爲這樣的小事而失去理智。 –

@Jorge Fuentes岡薩雷斯感謝隊友。 Ofcource我已經改變了元素的id。我忘了在上面的代碼中糾正這個問題。問題仍然存在。 – user1919

嘗試在'scrollTop'行之前添加'console.log（「test」）來查看代碼是否到達它。也許不叫。順便說一句，'scrollTop（160）'不適合所有值，因爲每個值都在不同的高度。您應該使用您想要滾動到的元素的'.offset（）。top'。添加工作小提琴，以便我們能夠更好地幫助您。 –

選擇您要查找的option元素。
使用所選選項元素的.offset()獲取偏移頂端位置。
獲取select元素的偏移頂部。
使用.scrollTop()滾動到所需的選項。

下面是一個例子

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>

來源

2017-07-26 08:12:42 DavidDomain

向下滾動到使用jQuery

回答

相關問題