字段的值显示不同字段"/>
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();},
如此就可以根据上面不同的值,展示不同的字段了。
更多推荐
fastadmin 表单页面,根据一个字段的值显示不同字段
发布评论