Question

我的客户不希望使用控制键来选择/取消选择多选列表中的项目。我想出了一个解决方案，但似乎无法在Chrome中保持所选项目的滚动位置。在Firefox中，这似乎工作正常。怎么了或者，如果有更好的解决方案，请提出建议。

$(document).ready(function () {
    $('.multi-select option').on('mousedown',function (e) {
        e.preventDefault();

        var select = $(this).parent();
        var selectTop = select.scrollTop();
                
        $(this).prop('selected', $(this).prop('selected') ? false : true);
        select.scrollTop(selectTop);

        return false;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select title="Title" class="multi-select" style="width: 143px; height: 250px; 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>

Answer 1

解决方案

$(document).ready(function () {

    var selectTop;
    var mustChangeScrollTop = false;

    $('.multi-select').on('scroll',function (e) {
        if (mustChangeScrollTop){
            $(this).scrollTop(selectTop);
             mustChangeScrollTop = false;
        }
        return true;
    });
	
    $('.multi-select option').on('mousedown',function (e) {
        e.preventDefault();

        selectTop = $(this).parent().scrollTop(); 
        $(this).prop('selected', $(this).prop('selected') ? false : true);		
        mustChangeScrollTop = true;

        return false;
    });
	
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select title="Title" class="multi-select" style="width: 143px; height: 250px; 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>

说明

我注意到在Chrome中，从mousedown事件返回后没有不必要的滚动。因此，一种解决方案/解决方法是添加一个onscroll事件，并将选择区域（$(this).scrollTop(selectTop);的顶部重置（selectTop）到更改所选选项（selectTop = $(this).parent().scrollTop();之前的区域）。之所以需要mustChangeScrollTop变量，是因为不仅在Chrome中发生不必要的滚动时，而且在用户手动滚动时，均会调用onscroll事件。因此，当即将发生不必要的滚动时（即用户选择一个选项时），我们将mustChangeScrollTop设置为true，然后（当发生不必要的滚动时）将其设置为true即可理解它，然后我们将其设置为false，以免打扰用户滚动。

我在Chrome中对其进行了测试，并且效果很好。希望对您有帮助。

保持多选jQuery的滚动位置

1 个答案: