当前位置 :| 主页>JQuery教程>

jquery傻瓜教程之教你如何制作左右选择框

来源：cnjquery原创 作者：snake 时间：2008-09-18 Tag： 点击：

(首先实在抱歉最近由于工作原因好长时间没有写东西,导致网站也没有怎么更新,抱歉)
下面我们来看看用jquery写一个左右选择框,这个还是比较实用的

第一步

我们建立两个下拉框和一个左移按钮一个右移按钮建立后效果图如下

html代码如下

以下为引用的内容：
<table width="100%" border="1" cellpadding="3" cellspacing="0" bordercolor="#CCCCCC" bordercolordark="#FFFFFF">
<tr>
    <td height="25" align="center" bgcolor="#F6F6F6">人员选择---<font color="#FF0000"> </td>
</tr>
<tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><table width="100%" border="1" cellpadding="3" cellspacing="0" bordercolor="#CCCCCC" bordercolordark="#FFFFFF">
            <tr>
              <td height="25" align="center" bgcolor="#F6F6F6">未选人员</td>
            </tr>
            <tr>
              <td>
     <select name='s1' id="s1" size='18' style='width:130px;height:220;' multiple="multiple">
                     <option value='a1' >a1</option>
                  <option value='a2'>a2</option>
             </select>   </td>
            </tr>
        </table></td>
        <td valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td align="center"><input type="button" name="add" id="add" value=">>" class="btn" /></td>
            </tr>
            <tr>
              <td align="center"> </td>
            </tr>
            <tr>
              <td align="center"><input type="button" name="remove" id="remove" value="<<" class="btn" /></td>
            </tr>
        </table></td>
        <td><table width="100%" border="1" cellpadding="3" cellspacing="0" bordercolor="#CCCCCC" bordercolordark="#FFFFFF">
            <tr>
              <td height="25" align="center" bgcolor="#F6F6F6">已选人员</td>
            </tr>
            <tr>
              <td><select name="s2" size="10" multiple="multiple" id="s2" style='width:130px;height:220;' >
    </select></td>
            </tr>
        </table></td>
      </tr>
    </table></td>
</tr>

</table>

第二步我们开始写js代码了 (时间问题代码没有经过优化只是直接写下去的)

以下为引用的内容：
<script>
<!--
$(function(){
$("#s1 option:first,#s2 option:first").attr("selected",true);

$("#s1").dblclick(function(){
$("option:selected",this).clone().appendTo("#s2");
$("option:selected",this).remove();
$("#s1 option:first,#s2 option:first").attr("selected",true);
});

$("#s2").dblclick(function(){
$("option:selected",this).clone().appendTo("#s1");
$("option:selected",this).remove();
$("#s1 option:first,#s2 option:first").attr("selected",true);
});

$("#add").click(function(){
$("#s1 option:selected").clone().appendTo("#s2");
$("#s1 option:selected").remove();
$("#s1 option:first,#s2 option:first").attr("selected",true);
});

$("#remove").click(function(){
$("#s2 option:selected").clone().appendTo("#s1");
$("#s2 option:selected").remove();
$("#s1 option:first,#s2 option:first").attr("selected",true);
});

});
-->
</script>

全部代码

以下为引用的内容：

<link href="css/css.css" rel="stylesheet" type="text/css" />
<title>JQUERY中的左右选择框</title>
<script src="http://www.cnjquery.com/demo/jquery.js" type="text/javascript"></script>
<script>
<!--
$(function(){
$("#s1 option:first,#s2 option:first").attr("selected",true);

$("#s1").dblclick(function(){
$("option:selected",this).clone().appendTo("#s2");
$("option:selected",this).remove();
$("#s1 option:first,#s2 option:first").attr("selected",true);
});

$("#s2").dblclick(function(){
$("option:selected",this).clone().appendTo("#s1");
$("option:selected",this).remove();
$("#s1 option:first,#s2 option:first").attr("selected",true);
});

$("#add").click(function(){
$("#s1 option:selected").clone().appendTo("#s2");
$("#s1 option:selected").remove();
$("#s1 option:first,#s2 option:first").attr("selected",true);
});

$("#remove").click(function(){
$("#s2 option:selected").clone().appendTo("#s1");
$("#s2 option:selected").remove();
$("#s1 option:first,#s2 option:first").attr("selected",true);
});

});
-->
</script>
<table width="100%" border="1" cellpadding="3" cellspacing="0" bordercolor="#CCCCCC" bordercolordark="#FFFFFF">
<tr>
    <td height="25" align="center" bgcolor="#F6F6F6">人员选择---<font color="#FF0000"><?=$ItemName[$pid]?></font></td>
</tr>
<tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><table width="100%" border="1" cellpadding="3" cellspacing="0" bordercolor="#CCCCCC" bordercolordark="#FFFFFF">
            <tr>
              <td height="25" align="center" bgcolor="#F6F6F6">未选人员</td>
            </tr>
            <tr>
              <td><select name='s1' id="s1" size='18' style='width:130px;height:220;' multiple="multiple">

      <option value='a1' >a1</option>
    <option value='a2'>a2</option>


    </select>   </td>
            </tr>
        </table></td>
        <td valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td align="center"><input type="button" name="add" id="add" value=">>" class="btn" /></td>
            </tr>
            <tr>
              <td align="center"> </td>
            </tr>
            <tr>
              <td align="center"><input type="button" name="remove" id="remove" value="<<" class="btn" /></td>
            </tr>
        </table></td>
        <td><table width="100%" border="1" cellpadding="3" cellspacing="0" bordercolor="#CCCCCC" bordercolordark="#FFFFFF">
            <tr>
              <td height="25" align="center" bgcolor="#F6F6F6">已选人员</td>
            </tr>
            <tr>
              <td><select name="s2" size="10" multiple="multiple" id="s2" style='width:130px;height:220;' >
    </select></td>
            </tr>
        </table></td>
      </tr>
    </table></td>
</tr>

</table>

[收藏] [推荐] [评论] [打印] [关闭]

顶一下

上一篇：jquery傻瓜基础教程之教你如何制作简单的dialog插件
下一篇：一个用Jquery 自己写的一个全文检索高亮的一个JS函数

最新评论共有 3 位网友发表了评论

查看所有评论

发表评论

栏目列表

jquery傻瓜教程之教你如何制作 左右选择框

jquery傻瓜教程之教你如何制作左右选择框