• 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

jQuery实现的多选

JavaScript 水墨上仙 1722次浏览

jQuery实现的多选

<!DOCTYPE />
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>test</title>
        
        <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    </head>
    
    <body>
        <select id="sel" size="20" multiple="multiple" style="width: 300px;">
            <option value="1" class="level-1" id="1">1</option>
            <option value="10" class="level-2" id="2">10</option>
            <option value="10" class="level-2" id="3">10</option>
            <option value="100" class="level-3" id="4">100</option>
            <option value="100" class="level-3" id="5">100</option>
            <option value="100" class="level-3" id="6">100</option>
            <option value="100" class="level-3" id="7">100</option>
            <option value="10" class="level-2" id="8">10</option>
            <option value="10" class="level-2" id="9">10</option>
            <option value="2" class="level-1" id="10">2</option>
            
            <option value="3" class="level-1" id="11">3</option>
            <option value="30" class="level-2" id="12">30</option>
            <option value="40" class="level-2" id="13">40</option>
            <option value="50" class="level-2" id="14">50</option>
            <option value="60" class="level-2" id="15">60</option>
            <option value="70" class="level-2" id="16">70</option>
            <option value="100" class="level-3" id="17">100</option>
            <option value="100" class="level-3" id="18">100</option>
            
            <option value="4" class="level-1" id="19">4</option>
            
            <option value="5" class="level-1" id="20">5</option>
            
            <option value="8" class="level-1" id="21">8</option>
        </select>
    </body>
    
    <script type="text/javascript">
        $(document).ready(function() {
            
            $('#sel').click(function() {
            
                var option = $('#' + $(this).attr('id') + ' option:selected'),
                    $num, to;
                
                $('#' + $(this).attr('id') + ' option:selected').each(function() {
                    $num = $(this).attr('class').split('-')[1];
                    to = ""
                    for(var i = 1; i <= $num; i++) {
                        to += '.level-' + i + ', ';
                    }
                    
                    $('#' + $(this).attr('id')).nextUntil(to).attr('selected', 'selected');
                });
            
            });
            
        });
    </script>
</html>


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明jQuery实现的多选
喜欢 (0)
加载中……