<script type="text/javascript">
function moveOption(updown, refId){
if(typeof $("#" + refId + " option:selected").val()=="undefined"){
alert("None Selected");
return false;
}
if(updown=="up"){
$("#" + refId + " option:selected:first-child").prop("selected", false);
before = $("#" + refId + " option:selected:first").prev();
$("#" + refId + " option:selected").detach().insertBefore(before);
}else{
$("#" + refId + " option:selected:last-child").prop("selected", false);
after = $("#" + refId + " option:selected:last").next();
$("#" + refId + " option:selected").detach().insertAfter(after);
}
}
$().ready(function() {
$('.up-button').click(function(){
var refId=$(this).attr("ref-id");
moveOption("up", refId);
});
$('.down-button').click(function(){
var refId=$(this).attr("ref-id");
moveOption("down", refId);
});
$('#select1').find('option').css("height", "20px");
$('#select1').find('option').css("padding-top", "9px");
$('#select2').find('option').css("height", "20px");
$('#select2').find('option').css("padding-top", "9px");
});
</script>
<form>
<div>
<select multiple id="select1" name="select1">
<option value="pankaj">aasfddf</option>
<option value="aashish">basdfsfd</option>
<option value="vikram">casdfasdf</option>
<option value="mohit">dasdfasdf</option>
</select>
<table>
<tr>
<td>
<input type="button" class="up-button" ref-id="select1" value="▲"> <input type="button" class="down-button" ref-id="select1" value="▼">
</td>
</tr>
</table>
</div>
<div>
<select multiple id="select2" name="select2">
<option value="pankaj">aasfddf</option>
<option value="aashish">basdfsfd</option>
<option value="vikram">casdfasdf</option>
<option value="mohit">dasdfasdf</option>
</select>
<table>
<tr>
<td>
<input type="button" class="up-button" ref-id="select2" value="▲"> <input type="button" class="down-button" ref-id="select2" value="▼">
</td>
</tr>
</table>
</div>
<br>
<input type="submit" value="Submit">
</form>