• [jQuery] html中两个select之间option元素的add与remove,多值上传


    网页代码
    <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>

    jQuery代码

    //对增加按钮进行事件绑定
    $('#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表的所有元素进行选中后,才好提交,要不然就传不过去了
    $('#select_1').children().each(function(){$(this).attr('selected', 'true')});
    $('#select_2').children().each(function(){$(this).attr('selected', 'true')});
    //ajax提交
    $.ajax({
    'success':function(rs){ $("#ajax_msg").text(rs);},
    'type':'POST',
    'url':"/index.php",
    'cache':false,
    'data':$(".form2").serialize()
    });
    }
  • 相关阅读:
    深入剖析Java中的装箱和拆箱
    JDBC(1)
    设计模式
    MySQL学习笔记(3)
    MySQL学习笔记(2)
    MySQL学习笔记(1)
    tomcat 部署项目出现Error thrown in preDeregister method
    JSP页面中的request.getContextPath()出现“ .... .. refers to the missing type String
    myEclipse 导入 jquery包为什么整个项目都会报错
    走楼梯
  • 原文地址:https://www.cnblogs.com/davidhhuan/p/1716988.html
Copyright © 2020-2023  润新知