这两天在帮一个初创公司做一个公司的展示页面，其中需要设计一个人员的招聘信息表单。

由于JQuery Moblie这货在表单提交的时候默认使用了Ajax，所以在PHP后台每次都只能接收到多选表单选择的最后一项数据。

所以说解决方法是什么呢？当然是禁止Ajax啊，可以在from标签中添加data-ajax=”false” 标签即可。

<form name="myForm[]" method="post" action="submit.php" data-ajax="false">

特别注意一下：



<select name="area[]" id="area" multiple="multiple" data-native-menu="false">
    <option value="Entrepreneurship">Entrepreneurship</option>
    <option value="Teamwork">Teamwork</option>
    <option value="Leadership">Leadership</option>
    <option value="Public speaking">Public speaking</option>
    <option value="Career mentoring">Career mentoring</option>
</select>

在php中，多选表单的提交中，需要将name标签加上[]，加上[]将以array的形式读取数据，这种语法是php所独有的。

读取数据的时候，可以通过implode(“,” , $_POST[‘var’])来获取集合起来的数据。

layui前端，弹窗多选表单，选择后自动添加到主表单，附带状态判断、除重、单行删除功能
实现效果如下：
点击选择，弹出弹窗




选择需要的数据后，主表格自动添加





除重



状态判断


主要前端代码如下：
HTML：
 <div>
            <table class="layui-table" lay-filter="main_table" id="choosetable"  >
                <thead>
                <tr>
                    <div class="layui-btn-container">
                        <a class="layui-btn layui-btn-sm" id="choose" name="choose" >
                            <i class="layui-icon">选择</i>
                        </a>
                    </div>
                </tr>
                <tr>
                    <th >操作</th>
                    <th >资产单号</th>
                    <th>资产编码</th>
                    <th >资产名称</th>
                    <th >资产类别</th>
                    <th >资产来源</th>
                    <th >资产所在位置</th>
                    <th >价格</th>

                </tr>
                

                <tr th:each="perii,lstati:${assetList}"><!--Thymeleaf 的循环渲染表格（数据从后端传入-->
                    <td ><input type='button' value='删除' class='layui-btn' onclick='delLine11(this)'/></td>
                    <td><input readonly="readonly" style="border:none;" type="text" name="tid" th:value="${perii.tid}"></td>
                    <td th:text="${perii.labelId}">资产编码</td>
                    <td th:text="${perii.assetName}">资产名称</td>
                    <td th:text="${perii.assetTypeName}">资产类别</td>
                    <td th:text="${perii.assetSourceName}">资产来源</td>
                    <td th:text="${perii.assetPositionName}">资产所在位置</td>
                    <td th:text="${perii.price}">价格</td>

                </tr>
                </thead>
            </table></div>

js：
<script>


    //资产选择器
    layui.tableSelect.render({
        elem : '#choose', //定义输入框input对象
        searchKey : 'search_LIKE_use_status', //搜索输入框的name值 默认keyword

        table : { //定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
            height : 220,
            url : '[[@{/amc/asset/queryList}]]',
            cols : [ [ {
                checkbox : true
            }, {
                field : 'tid',
                title : 'tid',
                width : 0
            },
                {
                    field : 'labelId',
                    title : '资产编号',
                    width : 100
                },{
                    field : 'useStatus',
                    title : '资产状态',
                    width : 100
                },{
                    field : 'assetName',
                    title : '资产名称',
                    width : 100
                },{
                    field : 'createdTime',
                    title : '购买时间',
                    width : 100
                },{
                    field : 'usePeriod',
                    title : '使用期限',
                    width : 100
                },{
                    field : 'assetTypeName',
                    title : '资产类别',
                    width : 100
                },{
                    field : 'assetSourceName',
                    title : '资产来源',
                    width : 100
                },{
                    field : 'assetPositionName',
                    title : '资产所在位置',
                    width : 100
                }, {
                    field : 'price',
                    title : '价格',
                    width : 100
                }] ]
        },
        done : function(elem, data) {
            var tr = $("#choosetable tr"); // 获取table中每一行内容
            var result =new Array();; // 数组
            for (var i = 0; i < tr.length; i++) {// 遍历表格中每一行的内容
                var tds = $(tr[i]).find("td");
                if (tds.length > 0) {
                    result.push({
                        "tid" : $(tds[1]).find("input").val()
                    })
                }
            }
            console.log("^^^^^^^^^^^^^^^^"+JSON.stringify(result));
            //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
            //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...  choosetable
            if (data.data.length > 0) {
                var elementById = data.data[0];
                console.log(elementById);
                for(var i=0; i<data.data.length;i++){
                    var tid=data.data[i].tid;
                    var labelId=data.data[i].labelId;
                    var assetName=data.data[i].assetName;
                    var assetTypeName=data.data[i].assetTypeName;
                    var assetSourceName=data.data[i].assetSourceName;
                    var assetPositionName=data.data[i].assetPositionName;
                    var price=data.data[i].price;
                    var useStatus = data.data[i].useStatus;
                    if (result.length == 0) {
                        if (useStatus == "已使用") {
                            var tr = document.createElement("tr");
                            tr.innerHTML = "<tr>"
                                + "<td class='c6'><input  class='layui-btn'  type='button' value='删除' class='cla2' οnclick='delLine(this)'/></td>"
                                + "<td  class='c2'><input readonly='readonly' style='border:none;' type='text' name='tid' value='" + tid + "'></td>"
                                + "<td class='c2'><input readonly='readonly' style='border:none;' type='text' name='labelId' value='" + labelId + "'></td>"
                                + "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='assetName' value='" + assetName + "'></td>"
                                + "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='assetTypeName' value='" + assetTypeName + "'></td>"
                                + "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='assetSourceName' value='" + assetSourceName + "'></td>"
                                + "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='assetPositionName' value='" + assetPositionName + "'></td>"
                                + "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='price' value='" + price + "'></td>"
                                + "</tr>";
                            // 添加数据到表中
                            document.getElementById("choosetable").appendChild(tr);
                        } else {
                            layui.layer.msg("只能选择已使用状态的资产，请重新选择");
                        }
                    } else {
                        // 除重
                        var bb = true;
                        for (var a = 0; a < result.length; a++) {
                            console.log("^^^^^^^for^^^^^^^^");
                            if (tid == result[a].tid) {
                                bb = false;
                                break
                            } else {
                            }
                        }
                        if (bb == true) {
                            if (useStatus == "已使用") {
                                var tr = document.createElement("tr");
                                tr.innerHTML = "<tr>"
                                    + "<td class='c6'><input  class='layui-btn'  type='button' value='删除' class='cla2' οnclick='delLine(this)'/></td>"
                                    + "<td  class='c2'><input readonly='readonly' style='border:none;' type='text' name='tid' value='" + tid + "'></td>"
                                    + "<td class='c2'><input readonly='readonly' style='border:none;' type='text' name='labelId' value='" + labelId + "'></td>"
                                    + "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='assetName' value='" + assetName + "'></td>"
                                    + "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='assetTypeName' value='" + assetTypeName + "'></td>"
                                    + "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='assetSourceName' value='" + assetSourceName + "'></td>"
                                    + "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='assetPositionName' value='" + assetPositionName + "'></td>"
                                    + "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='price' value='" + price + "'></td>"
                                    + "</tr>";
                                // 添加数据到表中
                                document.getElementById("choosetable").appendChild(tr);
                            } else {
                                layui.layer.msg("只能选择已使用状态的资产，请重新选择");
                            }
                        }else {
                            layui.layer.msg("重复资产，请重新选择");
                        }
                        // 除重
                    }

                }

            } else {
                elem.val('');
                $('#userInCompanyTid').val('');
            }

        }

    });


//表格单行删除（用于弹窗中被选中的数据，在主表格中删除
function delLine(obj){
        var tr = obj.parentNode.parentNode;//parentNode 获取文档层次中的父对象
        document.getElementById("choosetable").removeChild(tr);
    }
    
//表格单行删除（用于后端传回在主表格中渲染的数据，在主表格中删除
  function delLine11(obj){
        var tr = obj.parentNode.parentNode;//parentNode 获取文档层次中的父对象
        document.getElementById("choosetable").deleteRow(tr.rowIndex);
    }

<select multiple="multiple" size="20" style="width:200px" id="tester">
<option>123</option>
<option>123</option>
<option>123</option>
<option>123</option>
<option>123</option>

</select>


用jquery将多选表单中的所有项选中：

$("#tester option").attr("selected","selected")');

    
 
html代码

<input type="checkbox" class="ace auth_id" name="ckb[]" value="{!! $item->id !!}"/>
<input type="checkbox" class="ace auth_id" name="ckb[]" ........... />
<input type="checkbox" class="ace auth_id" name="ckb[]" ........... />
<input type="checkbox" class="ace auth_id" name="ckb[]" ........... />
<input type="checkbox" class="ace auth_id" name="ckb[]" ........... />
<button id="pass" type="submit" class="btn btn-sm btn-primary ">通过</button>
<button id="deny" type="submit" class="btn btn-sm btn-primary ">失败</button>

 
js代码

    $('#pass').on('click',function(){
        var idArray = [];
        $('.ace.auth_id').each(function(){
            if($(this).is(':checked')){  //判断已选中
                var id = $(this).val();  //判断未选中用if( !this.checked ) { }
                idArray.push(id);
            }
        });
        var ids = idArray.toString();
        console.log(ids);
        $.ajax({
            type: 'post',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: '/manage/allEnterprisePass',
            data: {ids:ids},
            dataType:'json',
            success: function(data){
                if(data.code == 1){
                    $('[type="checkbox"]').prop('checked','');
                    location.reload();
                }
            }
        });
    });



 

转载于:https://www.cnblogs.com/jiangfeilong/p/11363599.html