select多选框操作

最新推荐文章于 2024-06-11 16:39:30 发布

iteye_1601

最新推荐文章于 2024-06-11 16:39:30 发布

阅读量244

点赞数

分类专栏： JavaScript 文章标签： JavaScript UP Blog J# ViewUI

本文链接：https://blog.csdn.net/iteye_1601/article/details/81925820

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!--

//Everything you see here was written by Guy Malachi guy@guymal.com

function MoveUp(combo_name)

{

var combo=document.getElementById(combo_name);

i=combo.selectedIndex;

if (i>0)

{

swap(combo,i,i-1);

combo.options[i-1].selected=true;

combo.options[i].selected=false;

}

function MoveDown(combo_name)

{

var combo=document.getElementById(combo_name);

i=combo.selectedIndex;

if (i<combo.length-1 && i>-1)

{

swap(combo,i+1,i);

combo.options[i+1].selected=true;

combo.options[i].selected=false;

}

//this function is used to swap between elements

function swap(combo,index1, index2)

{

var savedValue=combo.options[index1].value;

var savedText=combo.options[index1].text;

combo.options[index1].value=combo.options[index2].value;

combo.options[index1].text=combo.options[index2].text;

combo.options[index2].value=savedValue;

combo.options[index2].text=savedText;

}

function MoveToTop(combo_name)

{

var combo=document.getElementById(combo_name);

i=combo.selectedIndex;

for (;i>0;i--)

{

swap(combo,i,i-1);

combo.options[i-1].selected=true;

combo.options[i].selected=false;

}

function MoveToBottom(combo_name)

{

var combo=document.getElementById(combo_name);

i=combo.selectedIndex;

if (i>-1)

{

for (;i<combo.length-1;i++)

{

swap(combo,i+1,i);

combo.options[i+1].selected=true;

combo.options[i].selected=false;

}

//moves options from one selection box (combo box) to another

//removes the all selected options from one combo box and adds them to the second combo box

function MoveElements(FromComboName,ToComboName)

{

var FromCombo=document.getElementById(FromComboName);

var ToCombo=document.getElementById(ToComboName);

var to_remove_counter=0;

for (var i=0;i<FromCombo.options.length;i++)

{

if (FromCombo.options[i].selected==true)

{

var addtext=FromCombo.options[i].text;

var addvalue=FromCombo.options[i].value;

ToCombo.options[ToCombo.options.length]=new Option(addtext,addvalue);

FromCombo.options[i].selected=false;

++to_remove_counter;

}

else

{

FromCombo.options[i-to_remove_counter].selected=false;

FromCombo.options[i-to_remove_counter].text=FromCombo.options[i].text;

FromCombo.options[i-to_remove_counter].value=FromCombo.options[i].value;

}

//now cleanup the last remaining options

var numToLeave=FromCombo.options.length-to_remove_counter;

for (i=FromCombo.options.length-1;i>=numToLeave;i--)

{

FromCombo.options[i]=null;

}

function toggleSelectAll(combo_name)

{

var select_all_link=document.getElementById('select_all_link');

var combo=document.getElementById(combo_name);//get the select

var to_select=true;

var select_link_new_caption;//the new "Select All" link caption will be here

if (select_all_link.unselectAll==true)//this is a new attribute that is dynamically added

{

//we now want to select all options

to_select=false;

select_all_link.unselectAll=false;

select_link_new_caption="Select All";//set the new caption

}

else

{

//we now want to unselect all options

select_all_link.unselectAll=true;

select_link_new_caption="Unselect All";//set the new caption

}

select_all_link.innerText=select_link_new_caption;//change the caption of the select all link

SelectAll(combo,to_select);

}

//select is true for selecting all, false for unselecting all

function SelectAll(combo,select)

{

for (var i=0;i<combo.options.length;i++)

{

combo.options[i].selected=select;

}

//-->

function show(){

var god=document.getElementById("right_select");

alert(god.options.length);}

</script>

</head>

<body>

All Elements [ <span onClick='toggleSelectAll("left_select")' style='color:blue;cursor:pointer;cursor:hand;' onMouseOver='this.style.color="red"' onMouseOut='this.style.color="blue"' id='select_all_link'>Select All</span> ]

</td>

<td>

</td>

Selected Elements

</td>

<td>

</td>

</tr>

<option VALUE="bill@ms.com">Bill Gates</option>

<option VALUE="bill@unemployed.com">Bill Clinton</option>

<option VALUE="bart@brat.com">Bart Simpson</option>

<option VALUE="oj@free.com">OJ Simpson</option>

<option VALUE="david@topten.com">David Letterman</option>

<option VALUE="prez@whitehouse.gov">George W. Bush</option>

</select>

</td>

<br>

</td>

</select>

</td>

<td>

</td>

</tr>

<td>

</td>

</tr>

<td>

</td>

</tr>

<td>

</td>

</tr>

</table>

<br>

<hr>

</body>

</html>

这是效果图

转自http://hi.baidu.com/nulldance/blog/item/82ee8da1d7d9598c461064d9.html

iteye_1601

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
select多选框操作

&lt;script language="JavaScript" TYPE="text/javascript"&gt; &lt;!-- //Everything you see here was written by Guy Malachi guy@guymal.com function MoveUp(co...
复制链接

扫一扫

专栏目录