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();
        },

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/126991.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

班级新闻管理系统asp.net+sqlserver

班级新闻管理系统 附加功能 新闻图片&#xff0c;点击次数访问自增&#xff0c;每个人都只能增删改查自己发布的新闻&#xff0c;并可以看到所有人发布的新闻 运行前附加数据库.mdf&#xff08;或sql生成数据库&#xff09; 主要技术&#xff1a; 基于asp.net架构和sql serve…

halcon分割粘连字符

下面的算子都可以分割&#xff1a; 1.*&#xff08;推荐使用这个&#xff09;在垂直范围较小的位置水平划分区域 partition_dynamic(circleRegion,parRegion,76,50)2.*将一个区域划分为大小大致相等的矩形。&#xff08;这个方法适合宽度相等&#xff0c;很规则的排列的字符串…

恢复数据软件推荐,数据恢复,就用这款!

“我是个比较粗心的人&#xff0c;在使用电脑时经常会误删很多文件&#xff0c;请问大家有没有好用的数据恢复软件推荐呀&#xff1f;” 在数字时代&#xff0c;数据是我们生活和工作中的重要组成部分。然而&#xff0c;意外的数据丢失或删除可能会给我们带来巨大的麻烦。这时&…

划分VOC数据集,以及转换为划分后的COCO数据集格式

1.VOC数据集 LabelImg是一款广泛应用于图像标注的开源工具&#xff0c;主要用于构建目标检测模型所需的数据集。Visual Object Classes&#xff08;VOC&#xff09;数据集作为一种常见的目标检测数据集&#xff0c;通过labelimg工具在图像中标注边界框和类别标签&#xff0c;为…

【2021研电赛】管道巡检机器人

本作品介绍参与极术社区的有奖征集|分享研电赛作品扩大影响力&#xff0c;更有重磅电子产品免费领取! 团队介绍 参赛单位&#xff1a;广西科技大学 参赛队伍&#xff1a;OMEN 参赛队员&#xff1a;吴海晨 陈永亮 乔亚坤 第1章 项目意义 1.1 研究背景及意义 据媒体报道&am…

Linux学习笔记之五(父子进程、孤儿进程、僵尸进程、守护进程)

Linux 1、进程1.1、进程的六种状态1.2、创建子进程1.3、添加子进程任务1.4、孤儿进程、僵尸进程、守护进程1.4.1、避免僵尸进程1.4.2、创建守护进程1.4.3、杀死守护进程 1.5、综合练习 1、进程 进程可以简单的理解为一个正在执行的程序&#xff0c;它是计算机系统中拥有资源和…

Ionic 组件 ion-item-divider ion-item-group ion-item-sliding ion-label ion-note

1 ion-item-divider Item dividers是块元素&#xff0c;可用于分隔列表中的items 。它们类似于列表标题&#xff0c;但它们不应该只放在列表的顶部&#xff0c;而应该放在items之间。 <ion-list><ion-item-group><ion-item-divider><ion-label> Secti…

使用小程序插件【用户信息功能页】获取用户昵称、头像、openid

摘要 因为获取用户信息的接口 wx.getUserInfo 存在滥用&#xff0c;使用不规范等原因&#xff0c;微信官方已经将这个接口权限回收&#xff0c;改为用户信息填写&#xff0c;即引导用户主动填写微信昵称和上传头像。这种做法确实是麻烦了点。 但是微信小程序插件&#xff0c;…

浏览器标签页之间的通信

前言 在开发管理后台页面的时候&#xff0c;会遇到这样一种需求&#xff1a;有一个列表页面&#xff0c;一个新增按钮&#xff0c;一个新增页面&#xff0c;点击新增按钮&#xff0c;在一个新的标签页中打开新增页面。并且&#xff0c;新增后要自动实时的更新列表页面的数据。…

机器学习概论

目录 一、机器学习概述 1、机器学习与人工智能、深度学习的关系 2、机器学习的范围 3、机器学习可以解决什么问题 给定数据的预测问题&#xff1a; 二、机器学习的类型 1、监督学习 分类&#xff08;Classification&#xff09; 回归&#xff08;Regression、Prediction&am…

Vue知识点总结

路由 使用 参数传递的两种方式 路由的params传参 路由的query传参 组件 概念 局部功能代码&#xff08;html、css js&#xff09;和资源(mp3 mp4 ttf .zip)的集合 非单文件组件 一个文件对应多个组件&#xff0c;以html结尾 使用 <xuexiao>即可使用 注意&#xf…

MySQL字符串需要注意的事项

char(N)&#xff0c;N在0-255间 varchar(N)&#xff0c;N在0-65536间 需要注意N是字符&#xff0c;不是字节&#xff0c;英文字母一个字符一个字节&#xff0c;阿拉伯字母一个字符两个字节&#xff0c;中文日文一个字符三个字节&#xff0c;emoji是一个字符四个字节 当今移动端…

arcgis 批量删除Table中的某些Field

当shp或者table文件较少时&#xff0c;可以手动删除每个文件中的某些字段&#xff0c;当文件较多时&#xff0c;就需要使用arcpy或者model进行处理。

SUB-1G芯片---PAN3031低功耗远距离无线收发芯片

PAN3031 是一款采用 ChirpIoT TM 调制解调技术的低功耗远距离无线收发芯片&#xff0c;支持半双工无线通信&#xff0c;工作频段为 370~590 MHz 和 740~1180MHz&#xff0c;该芯片具有高抗干扰性、高灵敏度、低功耗和超远传输距离等特性。最高具有-129dBm 的灵敏度&#xff0c;…

文件夹找不到了怎么恢复?4个正确恢复方法分享!

“我在电脑上保存了很多的文件和文件夹&#xff0c;今天在查找文件时&#xff0c;发现我有一整个文件夹都消失了&#xff0c;不知道怎么才能找到呢。有朋友可以帮帮忙吗&#xff1f;” 电脑中文件夹突然找不到了可能会引发焦虑&#xff0c;尤其是如果这些文件夹包含重要的数据。…

[工业自动化-6]:西门子S7-15xxx编程 - PLC系统硬件组成与架构

目录 一、PLC系统组成 1.1 PLC 单机系统组成 1.2 PLC 分布式系统 二、PLC各个组件 2.1 PLC上位机 2.2 PLC主站&#xff1a;PLC CPU控制中心 &#xff08;1&#xff09;主要功能 &#xff08;2&#xff09;主站组成 2.3 PLC分布式从站: IO模块的拉远 &#xff08;1&am…

拖拽式能源管理平台,轻松掌握能源情况!

随着科技的进步&#xff0c;能源问题变得日益紧迫。为了提高能源利用效率&#xff0c;减少浪费&#xff0c;各能源使用企业开始重视能源管理&#xff0c;并寻求高效的节能工具来协助管理。因此&#xff0c;智慧能源管理平台应运而生&#xff0c;为能源使用企业提供强大的节能管…

C++ Qt 学习(五):Qt Web 编程

1. Chrome 技术介绍 大多数 web 技术都是基于 chrome&#xff0c;例如 CEF、QCefView 以及 QWebEngineView&#xff0c;这些都是在 native 界面里用来显示 html 网页&#xff0c;并且可以与 web 交互 例如常见的登录窗口、优酷的视频区域、WPS 的稻壳商城等&#xff0c;这些都…

拓世科技集团打造数字人营销解决方案,为车企提供新的“增长担当”

汽车&#xff0c;已经渐渐融入了现代人的日常生活&#xff0c;从高端的身份标志转变为普罗大众的出行选择&#xff0c;它驶入了千家万户&#xff0c;成为了我们日常出行的可靠伙伴&#xff0c;见证着人们的生活故事和时代的变迁。 中国汽车市场的蓬勃发展引起了业内外的广泛关…

ES|QL(Elasticsearch 查询语言)入门

作者&#xff1a;Ninoslav Miskovic 通过使用 ES|QL 直接从 Discover 创建聚合、可视化和警报&#xff0c;缩短获得见解的时间。 什么是 ES|QL&#xff08;Elasticsearch 查询语言&#xff09;&#xff1f; ES|QL&#xff08;Elasticsearch 查询语言&#xff09;是 Elastic 全…