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>