Multi Select List Add/Remove Item issue in jquery

http://jumnuoy.blogspot.com/2014/01/multi-select-list-addremove-item-issue.html
Jquery code is as follow:
 
$('#addPop').click(function () {
  if ($('#distriList option:selected').val() != null) {
  var tempSelect = $('#distriList option:selected').val();
  $('#distriList option:selected').remove().appendTo('#selectDistriList');
  $("#distriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
  $("#selectDistriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
  $("#selectDistriList").val(tempSelect);
  tempSelect = '';
  } else {
  alert("Before add please select any position.");
  }
  });
 $('#removePop').click(function () {
  if ($('#selectDistriList option:selected').val() != null) {
  var tempSelect = $('#selectDistriList option:selected').val();
  $('#selectDistriList option:selected').remove().appendTo('#distriList');
  $("#selectDistriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
  $("#distriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
 $("#distriList").val(tempSelect);
  tempSelect = '';
  } else {
  alert("Before remove please select any position.");
  }
  });

Form:
<div class="row">
<div  class="col-sm-5">
<select id="distriList" name="distriList" multiple="multiple" class="form-control">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
<div  class="col-sm-2"> 

<a href="javascript:void(0);" id="addPop" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span></a>
<a href="javascript:void(0);" id="removePop" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span></a>
</div>
<div  class="col-sm-5">
<select id="selectDistriList" name="selectDistriList" multiple="multiple" class="form-control">
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
</select>
</div>
</div>


Jquery code is as follow:
 
$('#addPop').click(function () {
  if ($('#distriList option:selected').val() != null) {
  var tempSelect = $('#distriList option:selected').val();
  $('#distriList option:selected').remove().appendTo('#selectDistriList');
  $("#distriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
  $("#selectDistriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
  $("#selectDistriList").val(tempSelect);
  tempSelect = '';
  } else {
  alert("Before add please select any position.");
  }
  });
 $('#removePop').click(function () {
  if ($('#selectDistriList option:selected').val() != null) {
  var tempSelect = $('#selectDistriList option:selected').val();
  $('#selectDistriList option:selected').remove().appendTo('#distriList');
  $("#selectDistriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
  $("#distriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
 $("#distriList").val(tempSelect);
  tempSelect = '';
  } else {
  alert("Before remove please select any position.");
  }
  });

Form:
<div class="row">
<div  class="col-sm-5">
<select id="distriList" name="distriList" multiple="multiple" class="form-control">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
<div  class="col-sm-2"> 

<a href="javascript:void(0);" id="addPop" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span></a>
<a href="javascript:void(0);" id="removePop" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span></a>
</div>
<div  class="col-sm-5">
<select id="selectDistriList" name="selectDistriList" multiple="multiple" class="form-control">
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
</select>
</div>
</div>

0 comments:

Post a Comment

Followers

រឿង ដែលខានមើលមិនបាន

Contact us

Name

Email *

Message *

Your Language

Online

Copyright 2009 Simplex Celebs All rights reserved Designed by www.sruol9.com