选择器,jsp
解决方案 »
- EXT学习该如何下手啊
- Ext的下拉框不管选什么都是第一项。怎么解决?急!!!
- Firefox下的剪贴板问题
- 通过https访问ext4.2的example有些显示异常
- 怎么把这个东东拼接出JavaScript代码中的Array数组输出??
- 如何动态改变frame的属性
- 请介绍一个能调试JavaScript的工具,就是出错了光标能自动转到出错的那行的工具
- <div> 里面有滚动条,怎样才能在页面刷新的时候记录滚动条的位置,就是让 <DIV> 里面的内容保持不变呢?
- 请教梅花雨及各位高手,关于梅花雨3.0版日历控件的问题
- 插入flash 是否可以相应javascripti的onclick事件
- A页面的JS怎么和B页面的ActiveX传值交互
- 【小女请教】有是四川大学计算机学院的吗?
两select框 <select size="10" multiple="true">
// DIV点击事件
$("div").bind("click", function() {
var leftContain = $("#id1");
var rightContain = $("#id2");
var slt = $(this);
$(this).appendTo(id2);
$(this).remove();
});其他的按钮基本参照上面的改写即可
效果图:#container{
width:700px;
margin:0 auto;
overflow:hidden;
}
.unselected{
float:left;
width:300px;
}
.select-btn{
float:left;
width:100px;
height:100%;
text-align:center;
}
.selected{
float:left;
width:300px;
}
select{
width:300px;
}
<div id="container">
<div class="unselected">
<select size="8" multiple="multiple" id="unselected"></select>
</div>
<div class="select-btn">
<button type="button" id="selectall">>></button><br />
<button type="button" id="selectone">></button><br />
<button type="button" id="removeone"><</button><br />
<button type="button" id="removeall"><<</button>
</div>
<div class="selected">
<select size="8" multiple="multiple" id="selected"></select>
</div>
</div>
var data=[{label:"item1",value:1},{label:"item2",value:2},{label:"item3",value:3},{label:"item4",value:4},{label:"item5",value:5},{label:"item6",value:6},{label:"item7",value:7},{label:"item8",value:8},{label:"item9",value:9},{label:"item10",value:10},{label:"item11",value:11}];
//初始化
for(var i=0;i<data.length;i++){
var item=document.createElement("option");
item.text=data[i].label;
item.value=data[i].value;
item.initIndex=i;
unselected.appendChild(item);
}
//选择全部
selectall.addEventListener("click",function(){
var items=[];
for(var i=0;i<unselected.length;i++){
items.push(unselected[i]);
}
select(items);
},false);
//选择部分
selectone.addEventListener("click",function(){
var items=[];
for(var i=0;i<unselected.length;i++){
if(unselected[i].selected){
items.push(unselected[i]);
}
}
select(items);
},false);
//移除全部
removeall.addEventListener("click",function(){
var items=[];
for(var i=0;i<selected.length;i++){
items.push(selected[i]);
}
remove(items);
},false);
//移除部分
removeone.addEventListener("click",function(){
var items=[];
for(var i=0;i<selected.length;i++){
if(selected[i].selected){
items.push(selected[i]);
}
}
remove(items);
},false);
//选择
function select(items){
var i=0,j=0;
for(;i<items.length;i++){
while(selected[j]&&selected[j].initIndex<items[i].initIndex){
j++;
}
items[i].selected=false;
selected.add(items[i],selected[j]);
}
}
//移除
function remove(items){
var i=0,j=0;
for(;i<items.length;i++){
while(unselected[j]&&unselected[j].initIndex<items[i].initIndex){
j++;
}
items[i].selected=false;
unselected.add(items[i],unselected[j]);
}
}