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实现的多选！
