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

字段的值显示不同字段"/>

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-->
<scriptsrc="/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-->
<scriptsrc="/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();},

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