[转载]两个Select标签内容多选切换之jquery方法

baacloud免费翻墙vpn注册使用

[转载]两个Select标签内容多选切换之jquery方法 – qandq – 博客园.

利用JQuery实现两个select标签多选内容从一个标签选择到另外一个标签的简单方法,区区几行代码就能搞定,支持多种浏览器。

效果如下所示:

本例中用到JQuery请自行下载。
若有不明白或者有新的功能需求请留言

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>select标签  </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" src="jquery.js"></script>

<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function() {
    $("#toRight").click(function(){
        $("#selectLeft option:selected").each(function(){
                $("#selectRight").append("<option value=" + 
$(this).val() + ">" + $(this).html() + "</option>");
                $(this).remove();
        });
    });

    $("#toLeft").click(function(){    
        $("#selectRight option:selected").each(function(){
                $("#selectLeft").append("<option value=" + $(this).val() + 
">" + $(this).html() + "</option>");
//这个方法是默认在后面添加
                //$("#selectLeft option:first").before("<option value=" +
 $(this).val() + ">" + $(this).html() + "</option>"); 
//此种方法是在select前面加内容
                //$("#selectLeft option[value=3]").before("<option value=" +
 $(this).val() + ">" + $(this).html() + "</option>"); 
//此种方法是在selectt指定某一行加内容
                $(this).remove();
        });
    });

});
//-->
</SCRIPT>
</HEAD>

<BODY>
<table>
<tr>
    <td>
    <select  size='10' multiple id="selectLeft"  style="width:200px">
        <option value="0">Jquery API</option>
        <option  value="1">JavaScript高级程序设计</option>
        <option  value="2">锋利的jQuery</option>
        <option value="3">JavaScript 设计模式</option>
        <option  value="4">JavaScript+DOM高级程序设计</option>
        <option  value="5">PHP高级程序设计</option>
        <option  value="6">面向对象程序设计</option>
    </select>
    </td>
    <td>
    <input type="button" value=" >> " id="toRight" /><br /><br />
    <input type="button" value=" << " id="toLeft" />
    </td>
    <td>
    <select  size='10' multiple id="selectRight" style="width:200px">
    </select>
    </td>
</tr>
</table>
</BODY>
</HTML>
赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏