Menu
When I click on the focus button I want the select box to automatically scroll and then show the selected option.I am unable to achieve it using focus. Is there any javascript or jQuery method which can help me fix this ?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-2.1.4.js"></script>
<script>
$(document).ready(function () {
$("#focus").click(function () {
$("select#selectId").find(":selected").focus();
});
});
</script>
</head>
<body>
<select title="Title" id="selectId" style="width: 143px; height: 125px; overflow: scroll;" multiple="multiple">
<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>
<button type="button" id="focus">focus on selected</button>
</body>
</html>
756
You can use scrollIntoView() DOM method:
$(document).ready(function () {
$("#focus").click(function () {
$("#selectId").focus().find(":selected")[0].scrollIntoView();
});
});
EDIT: doesn't work on IE11 (other vs???)
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
