分享:html中两个select之间option元素的add与remove,多值上传

[color="#0000FF"]网页代码[/color]




    <form class="form2">

        <span class="left">

        <b>one</b><br />

         <select size="8" id="select_1" name="select_1[]" multiple="multiple">

            <option value="1">niaoren_1</option>

            <option value="2">niaoren_2</option>

            <option value="3">niaoren_3</option>

            <option value="4">niaoren_4</option>

            <option value="5">niaoren_5</option>

        </select>

        </span>

         

        <input type="button" value="Add" title="add" id="add_em" />

        <input type="button" value="Remove" title="remove" id="remove_em" />

         

        <span class="left">

        <b>two</b><br />

         <select size="8" id="select_2" name="select_2[]" multiple="multiple">

            <option value="6">niaoren_6</option>

            <option value="7">niaoren_7</option>

            <option value="8">niaoren_8</option>

            <option value="9">niaoren_9</option>

            <option value="10">niaoren_10</option>

        </select>

        </span>

        <br class="clear" />

        <input type="button" value="Update" name="yt0" onclick="setAllSelected()"/>

    </form>



[color="#0000FF"]jQuery代码[/color]




    //对增加按钮进行事件绑定

    $('#add_em').click(

    function()

    {

        if($("#select_1 :selected").length>0)

        {

            $("#select_1 option:selected").each(

                function()

                {

                    $("#select_2").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");

                    $(this).remove(); 

                }

            )

        }

    }

    );

    //对移除按钮进行事件绑定

    $('#remove_em').click(

    function()

    {

        if($("#select_2 :selected").length>0)

        {

            $("#select_2 option:selected").each(

                function()

                {

                    $("#select_1").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");

                    $(this).remove(); 

                }

            )

        }

    }

    );


    function setAllSelected()

    {

        //这里这先对两个select表的所有元素进行选中后,才好提交,要不然就传不过去了,正因为如此,所以才需要在button那里用onclick来调用这个setAllSelected()这个函数。

        $('#select_1').children().each(function(){$(this).attr('selected', 'true')});

        $('#select_2').children().each(function(){$(this).attr('selected', 'true')});

      //ajax提交,这里没有用到CHtml::ajax()方法,因为我不知道为什么,在CHtml::ajax()里面,我一直都不能把.form2的值Post过去,只能裸写了。

      $.ajax({

            'success':function(rs){ $("#ajax_msg").text(rs);},

            'type':'POST',

            'url':"/index.php",

            'cache':false,

            'data':$(".form2").serialize()

        });

    }



这肯定不是一种好的方法,希望起到抛砖引玉,得到更好的意见,献丑了~~~

多谢分享!

呵呵,得到强哥的认可不容易啊~