如何根据选项来动态的添加自己所需要的表单

最新推荐文章于 2024-02-12 09:08:05 发布

weixin_30436891

最新推荐文章于 2024-02-12 09:08:05 发布

阅读量172

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jourage/p/9946219.html

版权

如何在项目中引入具体的JS文件呢？他的格式应该是什么格式，以前我并不太懂，但是我现在会了。下面是具体的代码

<script type="text/javascript" th:src="@{/assets/js/yun/order/baseOrder.js?v1}" src="../../static/assets/js/yun/order/baseOrder.js"></script>

通过这种方式可以插入一个名字为baseorder.js的文件

那如何在动态的插入自己所需要的表格呢？有些选项框是自己需要的，有些选项框又不是自己不需要的。我在项目中发现了这个实现的过程，所以也想把这个记录下来。下面的代码是JSP中的HTML代码。

            <div class="layui-inline">
                <label for="payMethodType" class="layui-form-label" style="width: 150px">
                    <span class="x-red">*</span>支付方式
                </label>
                <div class="layui-input-inline" style="width: 300px">
                    <select id="payMethodType" name="payMethodType" lay-filter="payMethodType" lay-search="">
                    </select>
                </div>
            </div>

下面是通过JS的控制来实现的代码

$(function () {
    var payModeMap;
    var BASE_CONTEXT_PATH = $('meta[name=context-path]').attr("content");
    layui.use(['form'], function () {
        var form = layui.form;
        $.get(BASE_CONTEXT_PATH + '/cache/payModeMap', {}, function (res) {
            payModeMap = res.data;
            for (var key in payModeMap) {
                var html = '<option value="' + key + '" >' + payModeMap[key] + '</option>';
                $("#payMethodType").append(html);
                form.render();
            }
        });
        form.on('select(payMethodType)', function (data) {
            if ('SCAN_WEIXIN' === data.value) {
                $("#payMethodMsg").empty();
                var html = '<div class="layui-form-item">\n' +
                    '            <div class="layui-inline">\n' +
                    '                <label for="payType" class="layui-form-label" style="width: 150px"><span class="x-red">*</span>支付方式</label>' +
                    '                <div class="layui-input-inline" style="width: 300px">\n' +
                    '<select name="payType" id="payType"><option value="W01">借、贷卡</option><option value="W02">非贷记卡</option></select>' +

' <label for="authcode" class="layui-form-label" style="width: 150px">' +
' <span class="x-red">*</span>付款码</label>\n' +
' <div class="layui-input-inline" style="width: 300px">' +
' <input type="text" id="authcode" name="authcode" autocomplete="off" class="layui-input" required="" lay-verify="required"/>\n'

                    '                </div>\n' +
                    '            </div>\n' +
                    '        </div>';
                $("#payMethodMsg").append(html);
                form.render();

通过append 函数的使用和html进行动态添加，这也是我在项目中学到的东西。

转载于:https://www.cnblogs.com/jourage/p/9946219.html