<!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>
//javascript/1992