【原创】jquery实现2个listbox数据传递

点击左侧listbox，将点击项添加到右侧listbox。

点击右侧listbox，则移除点击项。listbox可以有后台数据库输出。

 <li style="height: 250px; margin: 5px 0px">权限列表<br />

                <select size="4" name="lb_list" multiple="multiple" id="lb_list" style="height:200px;width:150px;">

    <option value="1">后台登录</option>

    <option value="2">密码修改</option>

    <option value="3">新闻添加</option>

    <option value="4">新闻编辑</option>

    <option value="5">新闻删除</option>

    <option value="6">新闻发布</option>



</select>

            </li>

            <li style="padding-top: 110px">==========>><br />

                <<==========</li><li style="height: 250px; margin: 5px 0px">当前权限<br />

                    <select size="4" name="lb_list_sel" multiple="multiple" id="lb_list_sel" style="height:200px;width:150px;">

    <option value="1">后台登录</option>

    <option value="2">密码修改</option>

    <option value="3">新闻添加</option>



</select>

                </li>

js代码：（注意使用jquery1.6+）

$(function () {

            //添加到右边
            $('#lb_list>option').click(function () {

                var slt_length = $('#lb_list_sel>option').length; //不能放for循环，会造成死循环
                var ishave = false; //是否存在

                for (var i = 0; i < slt_length; i++) {
                    if ($('#lb_list').find("option:selected").prop('value') == $('#lb_list_sel>option').eq(i).prop('value')) {
                        ishave = false;
                        break;
                    } ishave = true;
                }
                if (slt_length == 0) {
                    ishave = true;
                }
                if (ishave) {
                    var temp = $('#lb_list').find("option:selected").clone();//如果这不用clone,那左侧的option项就会减少
                    $(temp).appendTo('#lb_list_sel');
                }
                var slt_fids = '';
                for (var i = 0; i < $('#lb_list_sel>option').length; i++) {
                    slt_fids += $('#lb_list_sel>option').eq(i).prop('value') + ',' + $('#lb_list_sel>option').eq(i).prop('text') + '|';
                }
                $('#hf_slt_fids').val(slt_fids); //需要传到服务器的值
            })

            //后边删除
            $('#lb_list_sel').click(function () {
                $('#lb_list_sel').find("option:selected").remove(); //或者 $('#lb_list_sel>option:eq(索引)')
                var slt_fids = '';
                for (var i = 0; i < $('#lb_list_sel>option').length; i++) {
                    slt_fids += $('#lb_list_sel>option').eq(i).prop('value') + ',' + $('#lb_list_sel>option').eq(i).prop('text') + '|';
                }
                $('#hf_slt_fids').val(slt_fids);  //隐藏域值格式 value,text|value,text|

            })

        })