javascript - Scroll down to selected option on button click using jquery - Stack Overflow

admin管理员组

文章数量:1279046

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.

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

There is no response and no error/warnings in the developers tool. Note that the list is created using django forms and templates.

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.

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

There is no response and no error/warnings in the developers tool. Note that the list is created using django forms and templates.

• javascript
• jquery

Share Improve this question Follow edited Jul 26, 2017 at 8:02 user1919 asked Jul 26, 2017 at 7:55 user1919user1919 3,9381919 gold badges6969 silver badges104104 bronze badges 4

• 2 The code you tried has no sense under the HTML you show. There's no element with id s. The select id is id_resource-regions. As a developer tip, when you copypaste something, try to read each line and understand the meaning of every piece of it. That way you won't lose your mind with small things like this. – Jorge Fuentes González Commented Jul 26, 2017 at 7:58
• @Jorge Fuentes González thanks mate. Ofcource I have changed the id of the element. I just forgot to correct this in the code above. The issue is still there. – user1919 Commented Jul 26, 2017 at 8:02
• Try to add a console.log("test") just before the scrollTop line to see if the code is reaching it. Maybe is not called. By the way, scrollTop(160) will not fit all the values as each one is in a different height. You should use .offset().top of the element you want to scroll to. Add a working fiddle so we will be able to help you better. – Jorge Fuentes González Commented Jul 26, 2017 at 8:11
• You have a select and options which button you mean ? – Osama Commented Jul 26, 2017 at 8:11

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

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

Here is an example

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

本文标签： javascriptScroll down to selected option on button click using jqueryStack Overflow