两个select 多选 移入移出

效果:





<tr>
  <td>工号选择:</td>
  <td  width="80%">
  <select id="choseWorkNo" name="choseWorkNo" multiple="multiple" style="width:100px;height:100px;" ondblclick="addWorkNo();">
<option value="002">测试2</option>
<option value="003">测试3</option>
<option value="004">测试4</option>
<option value="005">测试5</option>
</select>
    <font color="orange">*</font>
  </td>
</tr>
<tr>
  <td></td>
  <td  width="80%">
  &nbsp;&nbsp;&nbsp;
  <input type="button" onclick="addWorkNo();" width="60px" value="∨"/>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input type="button" onclick="deleteWorkNo();"  width="100px" value="∧"/>
  </td>
</tr>
<tr>
  <td>已选工号:</td>
  <td  width="80%">
  <select id="chosedWorkNo" name="chosedWorkNo" multiple="multiple" style="width:100px;height:100px;" ondblclick="deleteWorkNo();">
</select>
    <font color="orange">*</font>
  </td>
</tr>


function addWorkNo(){
if($("#choseWorkNo option:selected").length>0)
   {
$("#choseWorkNo option:selected").each(function(){
       $("#chosedWorkNo").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
$(this).remove(); 
      });
sortMe($("#chosedWorkNo"));
    }
    else
    {
      alert("请选择待添加的工号!");
    }
}

function deleteWorkNo(){
if($("#chosedWorkNo option:selected").length>0)
{
$("#chosedWorkNo option:selected").each(function(){
   $("#choseWorkNo").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
   $(this).remove(); 
   });
sortMe($("#choseWorkNo"));
}
else
{
alert("请选择待移除的工号!");
}
}
//排序
function sortMe(oSel){
var ln = oSel[0].options.length;
var arr = new Array(); // 这是关键部分

// 将select中的所有option的value值将保存在Array中
for (var i = 0; i < ln; i++)
{
  arr[i] = new Array();
  // 如果需要对option中的文本排序,可以改为arr[i] = oSel.options[i].text;
  arr[i][0] = oSel[0].options[i].value;
  arr[i][1] = oSel[0].options[i].text;
}
arr.sort(function(x,y){
return x[0]-y[0];
});
//arr.sort(); // 开始排序

// 清空Select中全部Option
while (ln--)
{
  oSel[0].options[ln] = null;
}
// 将排序后的数组重新添加到Select中
for (i = 0; i < arr.length; i++)
{
  //文本 数值
  oSel[0].add(new Option(arr[i][1], arr[i][0]));
}
}

猜你喜欢

转载自cuityang.iteye.com/blog/2395718