2017년 4월 2일 일요일

Select option up/down

 <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="&#9650;"> <input type="button" class="down-button" ref-id="select1" value="&#9660;">
</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="&#9650;"> <input type="button" class="down-button" ref-id="select2" value="&#9660;">
</td>
</tr>
</table>  
</div>  
<br>
<input type="submit" value="Submit">
</form>