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

news2024/11/29 6:29:18

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

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

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

redisson中的分布式锁二

公平锁&#xff08;Fair Lock&#xff09; 基于Redis的Redisson分布式可重入公平锁也是实现了java.util.concurrent.locks.Lock接口的一种RLock对象。同时还提供了异步&#xff08;Async&#xff09;、反射式&#xff08;Reactive&#xff09;和RxJava2标准的接口。它保证了当…

C#开发的OpenRA游戏之世界存在的属性CombatDebugOverlay(3)

C#开发的OpenRA游戏之世界存在的属性CombatDebugOverlay(3) 这次来分析CombatDebugOverlay属性,这个属性只有在调试游戏的时候才会使用。当你设置这个属性的时候,就可以看到如下图的结果: 可以看到物品的周边都有一个圆圈,以及有一些十字的点位标志。 那些十字表示的点…

LCD英文字模库(16x8)模拟测试程序

字模 字模&#xff0c;就是把文字符号转换为LCD能识别的像素点阵信息。 电子发烧友可能都熟悉字模的用途。就是调用者通过向LCD模块发送字模数据&#xff0c;LCD根据字模数据在LCD面板上相应的像素描绘出图形或文字。 现在&#xff0c;大部分的LCD都内置了字模库&#xff0c…

【脑源成像】术前癫痫的电源成像 评价:现状与未来展望

Electric source imaging for presurgical epilepsy evaluation: current status and future prospects 术前癫痫的电源成像 评价:现状与未来展望论文下载&#xff1a;算法程序下载&#xff1a;摘要1 项目介绍1.1. 选择要综述的文章2. 电源成像的基本原理4. ESI的实践方面4.1脑…

EPLAN中的电位,编号和报表

一、电位-eplan路由的理论基础 电位&#xff0c;信号和网络是eplan中的隐藏三君子。官网帮助中对电位和信号的解释如下&#xff1a; 在 EPLAN 中区分电位和信号。通过电位使连接属性的默认值和电位信息进入到项目中。 通过电位定义点或电位连接点定义一个电位或信号。此处录入…

Autosar模块介绍:Memory_2(NVM)

上一篇 | 返回主目录 | [下一篇] Autosar模块介绍&#xff1a;Memory_2(NVM 1 基本术语解释2 NVRAM Block组成关系2.1 基础Block类型2.1.1 NV Block2.1.2 RAM Block2.1.3 ROM Block2.2.4 Administrative Block 2.2 NVRAM Block类型 1 基本术语解释 编号缩写原文解释1NVNon Vol…

万字详解Java的三大特性:封装 | 继承 | 多态

前言&#xff1a;面向对象程序设计的三大特征就是&#xff1a;封装&#xff0c;继承&#xff0c;多态。在前文介绍了类和对象后&#xff0c;我们就可以继而学习什么是封装&#xff0c;怎么用类的子类来实现继承和多态 目录 一.面向对象的特性 1.封装性 2.继承性 3.多态性…

一种优雅的调用第三方接口的思路及实现

之前的项目调用第三方接口时&#xff0c;往往用HttpUtils类似的静态方法调用。比较丑&#xff0c;不通用。如下&#xff0c;这是截取项目中某人调用的一段代码&#xff0c;非常不雅&#xff1a; 经改进后&#xff0c;采用了动态代理技术来实现&#xff0c;效果如下&#xff1a…

麒麟KYLINOS中制作Ghost镜像文件

原文链接&#xff1a;麒麟KYLINOS中制作Ghost镜像文件 hello&#xff0c;大家好啊&#xff0c;今天给大家带来一篇在麒麟KYLINOS桌面操作系统2203中制作Ghost镜像文件的文章&#xff0c;首先需要将系统进行备份&#xff0c;然后在系统自带的备份还原工具中点击一键Ghost制作镜像…

【LeetCode】每日一题 2023_11_10 咒语和药水的成功对数(练习二分)

文章目录 刷题前唠嗑题目&#xff1a;咒语和药水的成功对数题目描述代码与解题思路偷看大佬题解 结语 刷题前唠嗑 LeetCode? 启动&#xff01;&#xff01;&#xff01; 可恶&#xff0c;今天的题目怎么也这么长 题目&#xff1a;咒语和药水的成功对数 题目链接&#xff1a…

微服务-我对Spring Clound的理解

官网&#xff1a;https://spring.io/projects/spring-cloud 官方说法&#xff1a;Spring Cloud 为开发人员提供了快速构建分布式系统中一些常见模式的工具&#xff08;例如配置管理、服务发现、熔断器、智能路由、微代理、控制总线、一次性令牌、全局锁、领导选举、分布式会话…

paddleOcr训练一个属于自己的模型

自己配置开发环境的时候踩了不少坑&#xff0c;现在记录下来&#xff0c;以后需要了可以直接找到现成的代码&#xff0c;也希望能够帮到有需要的小伙伴 目录 &#xff08;一&#xff09;、运行环境搭建1、Anaconda部分Anaconda安装Anaconda创建虚拟环境指令Anaconda Prompt工作…

k8s二进制(ETCD的部署安装)

角色ip组件k8s-master192.168.11.169kube-apiserver,kube-controller-manager,kube-scheduler,etcdk8s-node1192.168.11.164kubelet,kube-proxy,docker,etcdk8s-node2192.168.11.166kubelet,kube-proxy,docker,etcd 1、为etcd签发证书 1、证书的下载(任意机器上执行都可以) …

双十一剁手节,MobPush助力各大电商平台提前锁定潜力用户

一年一度的购物狂欢节双十一还未到来&#xff0c;各大电商平台却早已摩拳擦掌跃跃欲试。据统计&#xff0c;10月31日晚8点&#xff0c;京东百亿补贴日开场不到4分钟&#xff0c;京东百亿补贴频道成交额破亿&#xff0c;抖音商城整体GMV较去年双11同期提升200%&#xff0c;支付用…

SPRINGBOOT整合CXF发布WEB SERVICE和客户端调用(用户和密码验证)

主要分为客户端和服务端 服务端 pom配置 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.4.3</version><relativePath/> <!-- lookup parent fro…

loading动效实现

在站上闲逛发现一个非常有意思的loading效果&#xff0c;跟着大佬仿写了一下Vue版本的。 https://blog.csdn.net/tianjian4592/article/details/44538605 直接放源码 <script setup> import {ref, defineProps, watch} from "vue";const props defineProps({…

三菱FX3U系列-定位指令

目录 一、简介 二、指令形式 1、相对定位[DRVI、DDRVI] 2、绝对定位[DRVA、DDRVA] 三、总结 一、简介 定位指令用于控制伺服电机或步进电机的位置移动。可以通过改变脉冲频率和脉冲数量来控制电机的移动速度和移动距离&#xff0c;同时还可以指定移动的方向。 二、指令形…

YOLOv5检测界面-PyQt5实现

1.将detect.py运用到界面 要将 YOLOv5 的检测结果与 PyQt 界面结合&#xff0c;你需要进行一些额外的步骤。以下是一个简单的示例代码&#xff0c;展示如何使用 YOLOv5 进行目标检测并在 PyQt 界面中显示结果。 首先&#xff0c;确保你已经安装了必要的库&#xff1a; pip …

C++初阶(九)内存管理

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、C/C内存分布1、选择题2、填空题3、sizeof 和 strlen 区别&#xff1f;4、总结 二、 C语言…

『Nacos』 入门教程

前言 本文为 Nacos 平台快速入门教程&#xff0c;本文将会使用通俗易懂的语言手把手带您了解、使用 Nacos 平台&#xff0c;适合未接触过 Nacos 的初学者 官方手册&#xff1a;Nacos | Nacos 官方仓库&#xff1a;alibaba/nacos 版本&#xff1a;2.X 本文示例代码仓库&#xf…