zoukankan      html  css  js  c++  java
  • [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()
    });
    }
  • 相关阅读:
    ESRI Shapefiles (SHP)
    Python与开源GIS:在OGR中使用SQL语句进行查询
    [推荐]网店代销的卖家,你的宝贝名称修改了吗?
    怎么把经纬度转换成标准的度分秒单位
    如何提高淘宝流量
    十八种方法提升淘宝店流量
    mysql备份数据库几种方法
    Linux查看文件编码格式及文件编码转换
    MySQL 修改字段类型或长度
    mysql外键使用和级联
  • 原文地址:https://www.cnblogs.com/davidhhuan/p/1716988.html
Copyright © 2011-2022 走看看