使用jquery

Question

我有这样的国家/地区列表：

该清单非常广泛。我需要能够点击一下按钮才能移动（聚焦）到指定的国家/地区。

StackOverflow中有许多线程，但它们都没有工作。例如，我试过这个：

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

开发人员工具中没有响应，也没有错误/警告。 请注意，列表是使用django表单和模板创建的。

Answer 1

• 选择您要查找的option元素。
• 使用所选选项元素的.offset()获取偏移顶部位置。
• 获取select元素的偏移顶部。
• 使用.scrollTop()滚动到所需选项。

这是一个例子

＆＃13;

＆＃13;

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)
})

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;