关于一个客户端的问题!!

ekooz 2010-10-18 12:09:35
HTML code
<select multiple="multiple" id="userid" style="width:200px; height:260px;">
<option>张三</option>
<option>李四</option>
</select>
<div>
<span id="add">选中添加到右边>></span>
<span id="add_all">全部添加到右边>></span>
</div>
<select multiple="multiple" id="userid2" style="width:200px; height:260px;">

</select>
<div>
<span id="remove"><<选中删除到左边</span>
<span id="remove_all"><<全部删除到左边</span>
</div>




jquery代码如下:
JScript code
$('#add').click(function(){
alert("aaa");
var $options=$('#userid option:selected');
var remove = $options.remove();
$remove.appendTo('#userid2');
})



最重效果 :


我想 选中添加到右边>> 点击这个后 刚才所选的 就跑到右边去了 在左边 这些选择的也会消除。

但是现在貌似我点击 一点反应都没有!!大虾帮忙!!!
...全文
71 2 点赞 打赏 收藏 举报
写回复
2 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
heyli 2010-10-18

<html>
<head>
<title>MultiSelects </title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script>
<!--
$(function(){
$("#s1 option:first,#s2 option:first").attr("selected",true);

$("#s1").dblclick(function(){
var alloptions = $("#s1 option");
var so = $("#s1 option:selected");
if(so === null || so == "undefined"){
return;
}
try{
var a = (so.get(so.length-1).index == alloptions.length-1)? so.prev().attr("selected",true):so.next().attr("selected",true);
}catch(e){
return;
}
$("#s2").append(so);
});

$("#s2").dblclick(function(){
var alloptions = $("#s2 option");
var so = $("#s2 option:selected");
if(so === null || so == "undefined"){
return;
}
try{
var a = (so.get(so.length-1).index == alloptions.length-1)? so.prev().attr("selected",true):so.next().attr("selected",true);
}catch(e){
return;
}
$("#s1").append(so);
});

$("#add").click(function(){
var alloptions = $("#s1 option");
var so = $("#s1 option:selected");
var a = (so.get(so.length-1).index == alloptions.length-1)? so.prev().attr("selected",true):so.next().attr("selected",true);

$("#s2").append(so);
});

$("#remove").click(function(){
var alloptions = $("#s2 option");
var so = $("#s2 option:selected");

var a = (so.get(so.length-1).index == alloptions.length-1)? so.prev().attr("selected",true):so.next().attr("selected",true);

$("#s1").append(so);
});

$("#addall").click(function(){
$("#s2").append($("#s1 option").attr("selected",true));
});

$("#removeall").click(function(){
$("#s1").append($("#s2 option").attr("selected",true));
});

$("#s1up").click(function(){
var so = $("#s1 option:selected");
if(so.get(0).index!==0){
so.each(function(){
$(this).prev().before($(this));
});
}
});

$("#s1down").click(function(){
var alloptions = $("#s1 option");
var so = $("#s1 option:selected");

if(so.get(so.length-1).index!=alloptions.length-1){
for(i=so.length-1;i>=0;i=1-1)
{
var item = $(so.get(i));
item.insertAfter(item.next());
}
}
});

$("#s2up").click(function(){
var so = $("#s2 option:selected");
if(so.get(0).index!==0){
so.each(function(){
$(this).prev().before($(this));
});
}
});

$("#s2down").click(function(){
var alloptions = $("#s2 option");
var so = $("#s2 option:selected");

if(so.get(so.length-1).index!=alloptions.length-1){
for(i=so.length-1;i>=0;i--)
{
var item = $(so.get(i));
item.insertAfter(item.next());
}
}
});
});
-->
</script>
</head>
<body>
<table width="288" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="29">
<input type="button" name="s1up" id="s1up" value="up" /><br />
<input type="button" name="s1down" id="s1down" value="down"/>
</td>
<td width="100">
<select name="s1" size="10" multiple="multiple" id="s1" style=" width:100px;">
<option value="opt01">option01</option>
<option value="opt02">option02</option>
<option value="opt03">option03</option>
<option value="opt04">option04</option>
<option value="opt05">option05</option>
<option value="opt06">option06</option>
<option value="opt07">option07</option>
<option value="opt08">option08</option>
<option value="opt09">option09</option>
<option value="opt10">option10</option>
</select>
</td>
<td width="37" align="center"><input type="button" name="addall" id="addall" value=">|" /><br /><input type="button" name="add" id="add" value=">>" /><br /><input type="button" name="remove" id="remove" value="<<" /><br /><input type="button" name="removeall" id="removeall" value="|<" /></td>
<td width="100"><select name="s2" size="10" multiple="multiple" id="s2" style=" width:100px;">
</select></td>
<td width="119">
<input type="button" name="s2up" id="s2up" value="up" /><br />
<input type="button" name="s2down" id="s2down" value="down" /></td>
</tr>
</table>
</body>
</html>


网上的一个例子
  • 打赏
  • 举报
回复
ekooz 2010-10-18
希望大家 不吝赐教
  • 打赏
  • 举报
回复
相关推荐
发帖
PHP
创建于2008-08-27

1.9w+

社区成员

“超文本预处理器”,是在服务器端执行的脚本语言,尤其适用于Web开发并可嵌入HTML中。PHP语法利用了C、Java和Perl,该语言的主要目标是允许web开发人员快速编写动态网页。
申请成为版主
帖子事件
创建了帖子
2010-10-18 12:09
社区公告
暂无公告