欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

两个select 多选 移入移出

程序员文章站 2022-05-24 15:07:25
...
效果:

两个select 多选 移入移出
            
    
    博客分类: jsp 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]));
}
}
  • 两个select 多选 移入移出
            
    
    博客分类: jsp select 
  • 大小: 5.5 KB
相关标签: select