多项选择框的移入移出 <select multiple="multiple">

最新推荐文章于 2024-02-29 10:38:25 发布

beyondsanli

最新推荐文章于 2024-02-29 10:38:25 发布

阅读量353

点赞数

分类专栏： xml和html基础文章标签： JavaScript HTML ViewUI

xml和html基础专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
  <table>
    <tr>
	   <td>
	    <select multiple="multiple" size="15" style="width=200px" id="selectsrcid">
		<option value="0">测试一</option>
		<option value="1">测试二</option>
		</select>
		</td>
		 <td>
          <input type="button" value=" >> "  οnclick="javascript:srcToDest('selectsrcid','selectdestid')">
     <br>
     <input type="button"  value=" << " οnclick="javascript:destToSrc('selectdestid')">
     </td>
     <td>
      <select multiple="multiple" size="15" style="width=200px" id="selectdestid">
 
  </select>
  </td>
	</tr>
  </table>
 </BODY>
</HTML>
<script language="javascript">
   function srcToDest(srcid,destid)
      {
    var optionsObjects=document.getElementById(srcid);
    var optionsSubObjects=document.getElementById(destid);
   for(var o=0;o<optionsObjects.length;o++)
    {
if(optionsObjects.options[o].selected==true)
     {
    var optionsvalue=optionsObjects.options[o].value;
    var optionstext=optionsObjects.options[o].text;
    addoptions(destid,optionstext,optionsvalue)
     }
    }
      }
      
      
      //向目标
function addoptions(objectid,textvalue,optionsvalue)
{
var optionsSubObjects=document.getElementById(objectid);
var hasexist=0;
for(var o=0;o<optionsSubObjects.length;o++)
{
 var optionsvalue_sub=optionsSubObjects.options[o].text;
 if(optionsvalue_sub==textvalue)
 hasexist+=1;
}
if(hasexist==0)
{
 optionsSubObjects.add(new Option(textvalue, optionsvalue));
}
}


//将对象中所选的项删除

function destToSrc(objectid)
{
var optionsObjects=document.getElementById(objectid);

for(var o=0;o<optionsObjects.length;o++)
{
if(optionsObjects.options[o].selected==true)
 {
 var optionsvalue=optionsObjects.options[o].value;
 var optionstext=optionsObjects.options[o].text;
      removeoption(objectid,optionstext,optionsvalue)
 }
}
}


//删除单个选项
function removeoption(objectid,textvalue,optionsvalue)
{
var optionsSubObjects=document.getElementById(objectid);
for(var o=0;o<optionsSubObjects.length;o++)
{
 var optionsvalue_sub=optionsSubObjects.options[o].text;
 if(optionsvalue_sub==textvalue)
  optionsSubObjects.options.remove(o); 
}
}

</script>

beyondsanli

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多项选择框的移入移出 <select multiple="multiple">

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;&lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt; New Document &lt;/TITLE&gt; &lt;META NAME="Generator" CONTENT="EditPlus&q
复制链接

扫一扫