layui问卷调查插件 问题列表插件 新增列表 选项插件

效果图

先给各位大佬呈上效果图：

大致描述

使用到的工具有 JQ、Layui样式
主要的功能是：
1、新增问题、删除问题；
2、新增选项、删除选项；
3、保存时获取列表内容；
4、无列表的时候显示新增按钮

主要代码

// html部分
<div id="question-list">
            <div class="line-btn add-first-item" style="display: none">
                <button type="button" data-method="addFirstItem" class="layui-btn layui-btn-primary my-btn-primary">新增问题</button>
            </div>
            <div class="issue-list">
                <div class="selection-list">
                    <div class="selection-list-item">
                        <span class="issue-num">Q、</span>
                        <input type="text" placeholder="请输入题目" class="layui-input issue-input">
                    </div>
                </div>
                <div class="selection-list selection-items">
                    <div class="selection-list-item">
                        <span>A：</span>
                        <input type="text" placeholder="选项" class="layui-input">
                        <button type="button" data-method="delInput" class="layui-btn btn-delete-input">删除</button>
                    </div>
                </div>
                <div class="textCenter line-btn">
                    <button type="button" data-method="deleteItem" class="layui-btn layui-btn-primary my-btn-danger">删除问题</button>
                    <button type="button" data-method="addInput" class="layui-btn layui-btn-primary my-btn-normal">添加选项</button>
                    <button type="button" data-method="addItem" class="layui-btn layui-btn-primary my-btn-primary">此题后新增</button>
                </div>
            </div>
        </div>
//js 部分
layui.use('layer', function(){
        var $ = layui.jquery, layer = layui.layer;
        //新增问题模板
        var newItem =
            '<div class="issue-list">\n' +
            '\t<div class="selection-list">\n' +
            '\t\t<div class="selection-list-item">\n' +
            '\t\t\t<span>Q、</span>\n' +
            '\t\t\t<input type="text" placeholder="请输入题目" class="layui-input issue-input">\n' +
            '\t\t</div>\n' +
            '\t</div>\n' +
            '\t<div id="selection-items" class="selection-list selection-items">\n' +
            '\t\t<div class="selection-list-item">\n' +
            '\t\t\t<span>A：</span>\n' +
            '\t\t\t<input type="text" placeholder="选项" class="layui-input">\n' +
            '\t\t\t<button type="button" data-method="delInput" class="layui-btn btn-delete-input">删除</button>\n' +
            '\t\t</div>\n' +
            '\t</div>\n' +
            '\t<div class="textCenter line-btn">\n' +
            '\t\t<button type="button" data-method="deleteItem" class="layui-btn layui-btn-primary my-btn-danger">删除问题</button>\n' +
            '\t\t<button type="button" data-method="addInput" class="layui-btn layui-btn-primary my-btn-normal">添加选项</button>\n' +
            '\t\t<button type="button" data-method="addItem" class="layui-btn layui-btn-primary my-btn-primary">此题后新增</button>\n' +
            '\t</div>\n' +
            '</div>';
        var active = {
            // 新增选项
            addInput: function (othis) {
                var itemLength = othis.parent().parent().children('.selection-items').children('.selection-list-item').length;
                if(itemLength >=10){
                    layer.msg('选项不得超过10个',{time: 2000});
                    return;
                };
                var letterArr = ['A','B','C','D','E','F','G','H','I','J'];
                var newInput =
                    '<div class="selection-list-item">\n' +
                    '\t<span>'+letterArr[itemLength]+'：</span>\n' +
                    '\t<input type="text" placeholder="选项" class="layui-input">\n' +
                    '\t<button type="button" data-method="delInput" class="layui-btn btn-delete-input">删除</button>\n'+
                    '</div>';
                othis.parent().parent().find('.selection-items').append(newInput);
            },
            //删除选项
            delInput: function (othis) {
                othis.parent().remove();
            },
            //新增问题
            addItem: function (othis) {
                // var itemLength = $('#question-list>.issue-list').length+1;
                othis.parent().parent().after(newItem);
            },
            //删除问题
            deleteItem: function (othis) {
                var itemLength = $('#question-list>.issue-list').length;
                if(itemLength<=1){
                    $('.add-first-item')[0].style.display = 'block';
                }
                othis.parent().parent().remove();
            },
            addFirstItem: function () {
                $("#question-list").append(newItem);
                $('.add-first-item')[0].style.display = 'none';
            }
        };
        //动态加载元素用
        $('#question-list').on('click','.layui-btn', function () {
            var othis = $(this), method = othis.data('method');
            active[method].call(this, othis);
        });
    });

详细代码请前往github下载；
下载地址：
https://github.com/taurus888/layui-questionnaire