两个select 多选 移入移出
程序员文章站
2022-05-24 15:07:25
...
效果:
<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%">
<input type="button" onclick="addWorkNo();" width="60px" value="∨"/>
<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]));
}
}
<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%">
<input type="button" onclick="addWorkNo();" width="60px" value="∨"/>
<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]));
}
}