精华内容
下载资源
问答
  • 由于JQuery Moblie这货在表单提交的时候默认使用了Ajax,所以在PHP后台每次都只能接收到多选表单选择的最后一项数据。所以说解决方法是什么呢?当然是禁止Ajax啊,可以在from标签中添加data-ajax=”false” 标签即可...
    这两天在帮一个初创公司做一个公司的展示页面,其中需要设计一个人员的招聘信息表单。
    由于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’])来获取集合起来的数据。
    展开全文
  • 可自定义,可触摸的React单选/多选表单控件。 考虑到键盘和屏幕阅读器的可访问性而构建。 特征 单选和多选模式 可访问的WAI ARIA合规性 触摸友好 键盘友好 跨平台的类似交互体验 自定义标签渲染 自定义选项标记 ...
  • layui前端,弹窗多选表单,选择后自动添加到主表单,附带状态判断、除重、单行删除功能 实现效果如下: 点击选择,弹出弹窗 选择需要的数据后,主表格自动添加 除重 状态判断 主要前端代码如下: HTML: <...

    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多选表单用jquery选中项

    千次阅读 2012-02-01 11:14:28
    123 123 123 123 123 用jquery将多选表单中的所有项选中: $("#tester option").attr("selected","selected")');

    <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")');

    展开全文
  • 使用警报对话框的多选表单字段,可通过复选框选择多个项目并显示为筹码。 演示版 特征 可以用作常规表单字段。 易于实现。 简单直观地在应用程序中使用。 提供数据验证。 提供领域要求。 可自定义的文本。 ...
  • NULL 博文链接:https://maskainv.iteye.com/blog/547672
  • html代码 <input type="checkbox" class="ace auth_id" name="ckb[]" value="{!! $item->id !!}"/> ...input type="checkbox" class="ace auth_id" name="ckb[]" ..............input ...

     

    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

    展开全文
  • js获取checkbox多选表单

    2015-12-23 12:16:00
    obj = document.getElementsByName("test"); check_val = []; for(k in obj){ if(obj[k].checked) check_val.push(obj[k].value); } alert(check_val); 非常有用的函数 ...
  • jQeury在网页开发中非常有用,我们以前也说过几次,今天遇到一位读者的问题:“老师好,请教一个js的问题!...谢谢!” 这里我就用jQeury来解决一下这位读者的问题,为了代码简单,我做一个共有5个备选选项,最多允许...
  • 万能表单8.1.5 皮肤管理 单选多选万能表单8.1.5 皮肤管理 单选多选万能表单8.1.5 皮肤管理 单选多选万能表单8.1.5 皮肤管理 单选多选万能表单8.1.5 皮肤管理 单选多选
  • 用数组 后端代码 //创建数组 string biid={“1”,“2”,“3”}; string[] bxidsz = bxid.Split(’,’); //直接把数组给多选控件 obj[“F0000003”] = bxidsz;//员工姓名
  • 本文总结了下在表单处理中单选、多选、选择框值的获取及表单的序列化,写成了一个对象。如下:var formUtil = { // 获取单选按钮的值,如有没有选的话返回null // elements为radio类的集合的引用 getRadioValue:...
  • html checkbox cash 表单提交checkbox 多选
  • 主要介绍了js表单处理中单选、多选、选择框值的获取及表单的序列化的相关资料,需要的朋友可以参考下
  • combobox 下拉框开启多选,在编辑是用 $("form").form("load", data.data);报错 报错信息:Uncaught TypeError: Cannot read property 'split' of null 解决办法: if (data.data.ACCIDENT_...
  • var temp_str = '';var chose_arr = new Array();function get_true_length(arr) {var num = 0for (val in arr) {if (val != "false") {num++}}return num}function chose(e) {if (temp_str == '') {var str = $(e)....
  • 表单多选后,统一选下拉框的值 form表单和checkbox结合,全选和多选之后,统一处理供应商和类型的下拉选择 <div class="titleLine"> <span class="span1" ><Checkbox v-model="allSingle" @on-...
  • 在表格中已bootstrap中徽章的形式显示多选按钮 表单部分: <form> <input type="hidden" name="type" id="type" value="add"> <div class="form-group"> <label for="">编号</label&...
  • 本篇文章主要介绍了ReactJS实现表单的单选多选和反选的示例,非常具有实用价值,需要的朋友可以参考下
  • 1.假设我现在要对值班时间下拉框进行日期多选 <!-- 值班时间 --> <FormItem label="值班时间" prop="ondutyTime"> <DatePicker type="date" multiple placeholder="请选择值班时间" v-model=...
  • https://www.exp99.com/jswz/f2e/1408696007_34.html?tdsourcetag=s_pcqq_aiomsg
  • layui 表单多选反选

    2020-12-21 15:28:19
    <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">公告标题</label>...div class="layui-input-inline">...input type="text" name=...
  • 里所说的,用jquery去验证某一组多选至少要有一个选中,某一组单选至少有一个选中,,大家都知道单一的一个用js比较好验证,但是想要用jquery的验证并且用到jquery验证的提示信息,那么这就不好办了
  • <!DOCTYPE html> <title></title> 男 女 老 少 吃 ...用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。所有的浏览器均支持
  • form表单获取多选的值

    2019-03-26 14:18:00
    flask 中 form 表单直接获取多选框的值时 language = request.values.getlist('values')或 language=request.from.getlist("values") 在后端可以获取到值的内容但每次都报错,是因为列表不能直接进行入库 需要...
  • jquery遮罩弹出框仿招聘网站行业类型表单多选提交代码
  • php -- 表单多选

    2014-05-24 21:02:00
    -----011-form.html ----- 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <...一个PH...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,562
精华内容 11,424
关键字:

多选表单