select option 的操作

最新推荐文章于 2024-05-24 11:22:00 发布

转载最新推荐文章于 2024-05-24 11:22:00 发布 · 120 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liaoshiyong/archive/2013/06/12/3150912.html

本文介绍了一个使用JavaScript实现的下拉框元素添加、删除功能。通过两个下拉框之间的元素移动操作，可以方便地进行数据选择与管理。文章提供了完整的HTML页面和JavaScript代码。

var seleObj,selObj2;

function addall(selObj,selObj2)

{

for(i=0;i<(selObj.length);i++)

{

var gr = selObj2;

varvalOption = new Option;

var result=0;

if(selObj2.length>0)

{

for(k=0;k<(selObj2.length);k++)

{

if(selObj.options[i].value==selObj2.options[k].value)

result++;

}

if(result==0)

{

valOption.text=selObj.options[i].text;

valOption.value=selObj.options[i].value;

gr.add(valOption);

}

else

{

valOption.text=selObj.options[i].text;

valOption.value=selObj.options[i].value;

gr.add(valOption);

}

functionadd(selObj,selObj2)

{

doc=selObj;

vari,m=0;

for(i=0;i<(selObj.length);i++)

{

if(selObj.options[i].selected)

{ var gr = selObj2;

varvalOption = new Option;

var result=0;

if(selObj2.length>0)

{

for(k=0;k<(selObj2.length);k++)

{

if(selObj.options[i].value==selObj2.options[k].value)

result++;

}

if(result==0)

{

valOption.text=selObj.options[i].text;

valOption.value=selObj.options[i].value;

gr.add(valOption);

}

else

{

valOption.text=selObj.options[i].text;

valOption.value=selObj.options[i].value;

gr.add(valOption);

}

functionremove(selObj2)

{

doc=document;

var i,m;

for(i=(selObj2.length-1);i>=0;i--)

{ j=0;

if(selObj2.options[i].selected)

{ selObj2.options[i]=null;

}

functionremoveall(selObj2)

{

for(i=(selObj2.length-1);i>=0;i--)

{

j=0;

selObj2.options[i]=null;

}

</script>

<html>

<body>

<formname=form1>

<table>

<selectname=select size="10" class=pl style=width:100pt multiplereadonly>

<optionvalue=1>hg</option>

<optionvalue=2>hg</option>

<optionvalue=3>b</option>

<optionvalue=4>c</option>

<optionvalue=5>5</option>

</select>

<inputtype='button' name='Button' value='添加'onclick="add(document.form1.select,document.form1.wage_class)">

<inputtype='button' name='Button2' value='删除'onclick='remove(document.form1.wage_class)'>

<inputtype='button' name='Button1' value='全加' onclick="addall(document.form1.select,document.form1.wage_class)">

<inputtype='button' name='Button3' value='全删'onclick='removeall(document.form1.wage_class)'>

<selectname=wage_class size='10' style=width:100pt multiple readonly>

<optionvalue=6>6</option>

<optionvalue=7>7</option>

<optionvalue=8>8</option>

<optionvalue=9>9</option>

<optionvalue=10>10</option>

</select>

</form>

</body>

</html>

转载于:https://www.cnblogs.com/liaoshiyong/archive/2013/06/12/3150912.html