如何點擊按鈕滾動到選定的選項？

當我點擊焦點按鈕時，我希望選擇框自動滾動，然後顯示選中的選項。我無法使用焦點實現它。有沒有什麼JavaScript或jQuery方法可以幫助我解決這個問題？如何點擊按鈕滾動到選定的選項？

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

來源

2015-10-30 Karthik

嘗試'$（「＃選擇SELECTID」）找到（「：選擇」）scrollTo（）;' – messerbill

如果1和31所選擇的選項。？ – Quentin

錯誤：對象不支持屬性或方法'scrollTo' – Karthik

我寫了一個簡單的腳本。這是一個更好的答案，因爲在我的情況下，select的內容會動態變化，所以滾動高度不是一個常量。小提琴鏈接：https://jsfiddle.net/962vxk4f/

$(document).ready(function() { 
    $("#focus").click(function (e) { 
     $selectId = $("#selectId"); 
     var $index = $selectId.find(":selected").index(); 
     var lastPos = 0; 
     $selectId.children().each(function() { lastPos++; }); 
     var currScrollPos = ($index/lastPos) * parseInt($selectId[0].scrollHeight); 
     $selectId.scrollTop(currScrollPos); 
    }); 
});

來源

2015-11-02 07:32:43 Karthik

您可以使用scrollIntoView() DOM方法：

$(document).ready(function() { 
    $("#focus").click(function() { 
     $("#selectId").focus().find(":selected")[0].scrollIntoView(); 
    }); 
});

編輯：不會對IE11工作（其他VS ???）

來源

2015-10-30 13:10:04

好主意！ +1。 –

它沒有工作。你能否提供另一種解決方案？ – Karthik

它適用於我，你可以提供一個樣本，它不工作？如果選擇了多個選項，該怎麼辦？你期望的行爲是什麼？等等... –

$(document).ready(function() { 
$("#focus").click(function() { 
    var indx = $("select#selectId").find(":selected").index(); 
    $('#selectId').animate({ 
     scrollTop: indx * 14 
    }, 500); 
}); 
});

您也可以使用此，你可以在這裏控制滾動速度。

來源

2015-10-30 13:22:27

得到一個錯誤「indx is undefined」 – Karthik

@Karthik你必須做一些努力，因爲顯然在回答的發佈代碼中，定義了「indx」，所以呢？ –

Ohh對不起。 indx被定義，這對我有用。感謝vinoth kumar和Wolf – Karthik

如何點擊按鈕滾動到選定的選項？

回答

相關問題