fastadmin 表单页面，根据一个字段的值显示不同字段

表单中有计费方式，选中不同的计费方式显示不同的字段如下图

根据选择不同的计费方式：重量或夹板。展示不同相关字段：每件重量/每夹板件数量

add.html

   <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Jifei_list')}:</label>
        <div class="col-xs-12 col-sm-8">
                        
            <select  id="c-jifei_list" class="form-control selectpicker" name="row[jifei_list]">
                {foreach name="jifeiListList" item="vo"}
                    <option value="{$key}" {in name="key" value="1"}selected{/in}>{$vo}</option>
                {/foreach}
            </select>

        </div>
    </div>
    <div class="form-group" id="all-weight">
        <label class="control-label col-xs-12 col-sm-2">{:__('Weight')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-weight" class="form-control" step="0.01" name="row[weight]" type="number">
        </div>
    </div>
    <div class="form-group" id="all-jiaban_num">
        <label class="control-label col-xs-12 col-sm-2">{:__('Jiaban_num')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-jiaban_num" class="form-control" name="row[jiaban_num]" type="number">
        </div>
    </div>

<!--引入jq-->
<script
        src="/assets/js/jquery-1.12.4.min.js"
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
        crossorigin="anonymous">
</script>
<script>
    window.onload = function () {
        var type = $("#c-jifei_list").val();
        console.log(type);
        if(type == 1){
            $("#all-weight").show(); // 隐藏
            $("#all-jiaban_num").hide(); // 隐藏
        }else{
            $("#all-jiaban_num").show(); // 显示
            $("#all-weight").hide(); // 隐藏
        }
    }
</script>

edit.html

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Jifei_list')}:</label>
        <div class="col-xs-12 col-sm-8">
                        
            <select  id="c-jifei_list" class="form-control selectpicker" name="row[jifei_list]">
                {foreach name="jifeiListList" item="vo"}
                    <option value="{$key}" {in name="key" value="$row.jifei_list"}selected{/in}>{$vo}</option>
                {/foreach}
            </select>

        </div>
    </div>
    <div class="form-group"  id="all-weight">
        <label class="control-label col-xs-12 col-sm-2">{:__('Weight')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-weight" class="form-control" step="0.01" name="row[weight]" type="number" value="{$row.weight|htmlentities}">
        </div>
    </div>
    <div class="form-group" id="all-jiaban_num">
        <label class="control-label col-xs-12 col-sm-2">{:__('Jiaban_num')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-jiaban_num" class="form-control" name="row[jiaban_num]" type="number" value="{$row.jiaban_num|htmlentities}">
        </div>
    </div>

<!--引入jq-->
<script
        src="/assets/js/jquery-1.12.4.min.js"
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
        crossorigin="anonymous">
</script>
<script>
    window.onload = function () {
        var type = $("#c-jifei_list").val();
        console.log(type);
        if(type == 1){
            $("#all-weight").show(); // 隐藏
            $("#all-jiaban_num").hide(); // 隐藏
        }else{
            $("#all-jiaban_num").show(); // 显示
            $("#all-weight").hide(); // 隐藏
        }
    }
</script>

对应的一键生成的js文件。public/assets/backend/你的类名.js中修改add/edit方法

        add: function () {
            $(document).on("change", "#c-jifei_list", function(){
                var type = $("#c-jifei_list").val()
                if(type == 1){
                    $("#all-weight").show(); // 隐藏
                    $("#all-jiaban_num").hide(); // 隐藏
                }else{
                    $("#all-jiaban_num").show(); // 显示
                    $("#all-weight").hide(); // 隐藏
                }
            });
            Controller.api.bindevent();
        },
        edit: function () {
            $(document).on("change", "#c-jifei_list", function(){
                var type = $("#c-jifei_list").val()
                if(type == 1){
                    $("#all-weight").show(); // 隐藏
                    $("#all-jiaban_num").hide(); // 隐藏
                }else{
                    $("#all-jiaban_num").show(); // 显示
                    $("#all-weight").hide(); // 隐藏
                }
            });
            Controller.api.bindevent();
        },

如此就可以根据上面不同的值，展示不同的字段了。