当前位置：Gxlcms > JavaScript > javascript实现的左右选择框效果代码

javascript实现的左右选择框效果代码

时间：2021-07-01 10:21:17 帮助过：5人阅读

<SCRIPT LANGUAGE="JavaScript"> 
<!-- Begin 
sortitems = 1;  // Automatically sort items within lists? (1 or 0)

function SortD(box)  { 
 var temp_opts = new Array(); 
 var temp = new Object(); 
 for(var i=0; i<box.options.length; i++)  { 
 temp_opts[i] = box.options[i]; 
 }

for(var x=0; x<temp_opts.length-1; x++)  { 
   for(var y=(x+1); y<temp_opts.length; y++)  { 
     if(temp_opts[x].text > temp_opts[y].text)  { 
     temp = temp_opts[x].text; 
     temp_opts[x].text = temp_opts[y].text; 
     temp_opts[y].text = temp; 
     temp = temp_opts[x].value; 
     temp_opts[x].value = temp_opts[y].value; 
     temp_opts[y].value = temp; 
        } 
      } 
 }

for(var i=0; i<box.options.length; i++)  { 
 box.options[i].value = temp_opts[i].value; 
 box.options[i].text = temp_opts[i].text; 
    } 
}

// End --> 
</script>

<form ACTION="" METHOD="POST"> 
<table border="0"> 
<tr> 
<td><select multiple size="5" name="list1" style="width:250px"> 
<option value="11"> item 1.1 </option> 
<option value="12"> item 1.2 </option> 
<option value="13"> item 1.3 </option> 
</select></td> 
<td> 
<input type="button" value="   >   " onclick="move(this.form.list1,this.form.list2)" name="B1">
 
<input type="button" value="   <   " onclick="move(this.form.list2,this.form.list1)" name="B2">

<input type="button" value="   >>   " onclick="moveall(this.form.list1,this.form.list2)" name="B3">
 
<input type="button" value="   <<   " onclick="moveall(this.form.list2,this.form.list1)" name="B4"> 
</td> 
<td><select multiple size="5" name="list2" style="width:250px"> 
<option value="21"> item 2.1 </option> 
<option value="22"> item 2.2 </option> 
<option value="23"> item 2.3 </option> 
</select></td>

</tr> 
</table> 
</form>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

javascript实现的左右选择框效果代码

人气教程排行