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

如何在项目中引入具体的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=" 150px">
                    <span class="x-red">*</span>支付方式
                </label>
                <div class="layui-input-inline" style=" 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">
' +
                    '            <div class="layui-inline">
' +
                    '                <label for="payType" class="layui-form-label" style=" 150px"><span class="x-red">*</span>支付方式</label>' +
                    '                <div class="layui-input-inline" style=" 300px">
' +
                    '<select name="payType" id="payType"><option value="W01">借、贷卡</option><option value="W02">非贷记卡</option></select>' +

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

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

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

原文地址:https://www.cnblogs.com/jourage/p/9946219.html