JS操作HTML的select标签，内容之间的添加，删除

Terry_Y

浏览: 44714 次
性别:
来自: 长沙

最近访客更多访客>>

王振8936

chwoyaofei

It_matters

song264516

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

HTML C C++C#F#

2个select之间的移动，分单个移动和全部移动，
具体情况如下：

样式如下（类似而已，呵呵）：

a　　　　　　　　　　　k
b　　　　　>>　　　　　l
c　　　　　　　　　　　m
d　　　　　>　　　　　
e
f　　　　　<<
g
h　　　　　<
i

<script language="javascript">
function add(){
	var opt=selectfrom.options;
	len=opt.length;
	for(i=len-1;i>-1;i--){
		if(opt[i].selected){
			select2.appendChild(opt[i]);
		}
	}
}

function addAll(){
	var opt=selectfrom.options;
	len=opt.length;
	for(i=len-1;i>-1;i--){
		select2.appendChild(opt[i]);
	}
}

function del(){
	var opt=select2.options;
	len=opt.length;
	for(i=len-1;i>-1;i--){
		if(opt[i].selected){
			selectfrom.appendChild(opt[i]);
		}
	}
}

function delAll(){
	var opt=select2.options;
	len=opt.length;
	for(i=len-1;i>-1;i--){
		selectfrom.appendChild(opt[i]);
	}
}
</script>
<body>
<table width="27%" height="194" border="0" cellpadding="1" cellspacing="0">
  <tr>
    <td width="21%"><select id="selectfrom" size="15" multiple="multiple" style="width:100px">
      <option>a</option>
      <option>b</option>
      <option>c</option>
      <option>d</option>
      <option>e</option>
      <option>f</option>
      <option>g</option>
      <option>h</option>
      <option>i</option>
      <option>j</option>
      <option>k</option>
      <option>j</option>
      <option>m</option>
      <option>n</option>
                </select></td>
    <td width="57%"><p align="center">
      <input name="addAll" type="button" id="addAll" value=" &gt;&gt; " style="width:40px" onclick="addAll()"/>
    </p>
    <p align="center">
      <input name="add" type="button" id="add" style="width:40px" value=" &gt; " onclick="add()"/>
    </p>
    <p align="center">
      <input name="del" type="button" id="del" value=" &lt; " style="width:40px" onclick="del()"/>
    </p>
    <p align="center">
      <input name="delAll" type="button" id="delAll" value=" &lt;&lt; " style="width:40px" onclick="delAll()"/>
</p></td>
    <td width="22%"><select id="select2" size="15" multiple="multiple" style="width:100px">
        </select></td>
  </tr>
</table>

分享到：

C3P0连接池配置详解 | CSS 限制文本框输入空格无效

2008-04-02 15:29
浏览 3706
评论(4)
论坛回复 / 浏览 (4 / 5432)
分类:Web前端
查看更多

4 楼 netfork 2009-03-01

这个性能如何啊？如果有600条数据以上，不知道能什么好的方法解决性能问题。

3 楼 verygoodverypowerful 2008-04-30

正序需要在for循环中加个i--
function addAll(){
var opt=selectfrom.options;
len=opt.length;
for(i=0;i<len;i++){
select2.appendChild(opt[0]);
i--;
}
}

2 楼 andy.wang 2008-04-29

全部增加，全部删除会倒序添加，感觉不是特别好，故改了一下
function addAll(){
    var opt=selectfrom.options;
    len=opt.length;
    for(i=0;i<len;i++){
        select2.appendChild(opt[0]);
    }
}
function delAll(){
    var opt=select2.options;
    len=opt.length;
    for(i=0;i<len;i++){
        selectfrom.appendChild(opt[0]);
    }
}

1 楼 nbawukun 2008-04-29

问个问题，那你的add方法做例子，select2.appendChild(opt[i]); 以后就添加到了select2，这没有问题，但是 selectfrom.options[i]没有remove，那为什么左边的被选中的自己消失了呢？

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论