layui check,radio,select使用

 <form class="layui-form" action="">
                <blockquote class="layui-elem-quote">基本信息</blockquote>
                <div class="layui-form-item">
                    <label class="layui-form-label">所在城市</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="cityCheckbox" value="NJ" title="南京">
                        <input type="checkbox" name="cityCheckbox" value="SZ" title="苏州">
                        <input type="checkbox" name="cityCheckbox" value="WX" title="无锡">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label ">所在城市</label>
                    <div class="layui-input-block">
                        <input type="radio" name="cityRadio" value="N" title="南京">
                        <input type="radio" name="cityRadio" value="S" title="苏州">
                        <input type="radio" name="cityRadio" value="W" title="无锡">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">所在城市</label>
                    <div class="layui-input-block">
                        <select id="cityOption" name="cityOption" required  lay-verify="required">
                            <option value="NJ">南京</option>
                            <option value="SZ">苏州</option>
                            <option value="WX">无锡</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" style="margin-top:25px;">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="roomAdd" style="margin-left: 15%">确定</button>
                        &nbsp;&nbsp;
                        <button type="button" class="layui-btn layui-btn-primary"  data-type="close">关闭</button>
                    </div>
                </div>
            </form>

 //添加
        form.on('submit(cityAdd)', function (data) {
            var city_arr = new Array();
            $("input:checkbox[name='cityCheckbox']:checked").each(function(){
                city_arr.push($(this).val());
                console.log("选中的", city_arr.join(","))
            });
            data.field.cityCheckbox = city_arr;
            $.ajax({
                type: "POST",
                url: "/City/cityAdd",
                data: data.field,
                success: function (result) {
                    if (result.code === 0) {
                        layer.msg('添加成功', {
                            icon: 1,
                            time: 2000
                        }, function () {
                            parent.layui.admin.closeThisTabs();
                        });
                    } else {
                        layer.msg(result.message, {icon: 5});
                    }
                }
            });
            return false; //阻止表单跳转
        });

 //修改显示
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/City/cityFind" ,
            data:{id:id},
            success: function (result) {
                if(0 === result.code){
                    let content = result.content;
                    $("#idEdit").val(id);
                    var cityArr = content.cityCheckbox.split(",");
                    console.log("cityArr", cityArr);
                    if(cityArr != "") {
                        for(var i = 0; i < cityArr.length; i++) {
                            $("[name=cityCheckbox][value=" + cityArr[i] + "]").prop("checked", true);
                        }
                    }

                    var cityRa = result.cityRadio;
                    if(cityRa == 'N') {
                        $("input[name=cityRadio][value='N']").prop("checked",true);
                        $("input[name=cityRadio][value='S']").prop("checked",false);
                        $("input[name=cityRadio][value='W']").prop("checked",false);
                    }else if(cityRa == 'S') {
                        $("input[name=cityRadio][value='N']").prop("checked",false);
                        $("input[name=cityRadio][value='S']").prop("checked",true);
                        $("input[name=cityRadio][value='W']").prop("checked",false);
                    }else{
                        $("input[name=cityRadio][value='N']").prop("checked",false);
                        $("input[name=cityRadio][value='S']").prop("checked",false);
                        $("input[name=cityRadio][value='W']").prop("checked",true);
                    }

                    $("#cityOption").val(content.cityOption);

                    form.render();
                }
            }
        });

来源：CSDN

作者：小网名zzy

链接：https://blog.csdn.net/u012598738/article/details/103769500

标签

input

radio

select

form