首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

admin- on -rest in create form -如何根据其他输入值在下拉列表中填充列表

admin-on-rest是一个基于React和Redux的开源框架,用于构建管理界面。它提供了一组可重用的React组件和Redux中间件,使开发人员能够快速构建功能丰富的管理界面。

在admin-on-rest中,创建表单(create form)是一种常见的操作,它允许用户输入数据并将其提交到后端进行处理。在创建表单中,有时需要根据其他输入值来填充下拉列表。

要实现这个功能,可以使用admin-on-rest提供的FormDataConsumer组件。FormDataConsumer组件可以访问表单中其他字段的值,并根据这些值来动态生成下拉列表的选项。

以下是一个示例代码,展示了如何根据其他输入值在下拉列表中填充列表:

代码语言:jsx
复制
import React from 'react';
import { Create, SimpleForm, TextInput, SelectInput, FormDataConsumer } from 'admin-on-rest';

const CreateForm = (props) => (
    <Create {...props}>
        <SimpleForm>
            <TextInput source="name" />
            <SelectInput source="category" choices={[
                { id: '1', name: 'Category 1' },
                { id: '2', name: 'Category 2' },
                { id: '3', name: 'Category 3' },
            ]} />
            <FormDataConsumer>
                {({ formData, ...rest }) => (
                    <SelectInput
                        source="subCategory"
                        choices={getSubCategories(formData.category)}
                        {...rest}
                    />
                )}
            </FormDataConsumer>
        </SimpleForm>
    </Create>
);

const getSubCategories = (category) => {
    // 根据category值获取对应的子类别列表
    // 返回一个包含子类别选项的数组
    // 这里只是一个示例,实际应根据业务逻辑进行处理
    switch (category) {
        case '1':
            return [
                { id: '1', name: 'Subcategory 1.1' },
                { id: '2', name: 'Subcategory 1.2' },
            ];
        case '2':
            return [
                { id: '3', name: 'Subcategory 2.1' },
                { id: '4', name: 'Subcategory 2.2' },
            ];
        case '3':
            return [
                { id: '5', name: 'Subcategory 3.1' },
                { id: '6', name: 'Subcategory 3.2' },
            ];
        default:
            return [];
    }
};

export default CreateForm;

在上述示例中,我们定义了一个CreateForm组件,其中包含一个name字段和一个category字段。根据category字段的值,我们使用FormDataConsumer组件动态生成subCategory字段的下拉列表选项。getSubCategories函数根据category的值返回对应的子类别选项。

这只是一个简单的示例,实际应用中可能需要根据具体业务逻辑进行更复杂的处理。根据实际情况,您可以自定义getSubCategories函数来获取正确的子类别选项。

腾讯云提供了一系列与云计算相关的产品,例如云服务器、云数据库、云存储等。您可以根据具体需求选择适合的产品。您可以访问腾讯云官方网站(https://cloud.tencent.com/)了解更多关于腾讯云产品的信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

ASP.NET MVC框架(第四部分): 处理表单编辑和提交场景

表单输入和提交场景 为示范如何在ASP.NET MVC框架处理表单输入和提交场景的一些基本原则,我们将建造一个简单的产品列表,产品生成,和产品编辑场景。...Create" action方法则处理从表单提交过来的根据这些在数据库中生成一个新产品,然后将客户转向到产品的分类列表网页。...注意Html.Select辅助方法有个重载版本,允许你指定下拉的选定是什么。在下面的代码片断,我表示我要Category下拉根据编辑产品目前的CategoryID自动选择某一项: ?...但注意,填充的不是一个空对象,我们使用了一个模式,先从数据库获取老的,然后对它应用用户做的改动,然后更新到数据库。...结语 希望本帖子提供了ASP.NET MVC框架如何处理表单输入和提交场景的一些细节,还提供了你可以如何处理和结构化常见数据输入和编辑场景的一些背景。

5.1K70
  • 【分享】 纯 js 表单控件 —— 让 “增改查” 更轻松!

    需求、目的: 1、 在前台网页,使用js自动创建表单 2、 可以控制表单里的控件类型,比如文本框、下拉列表框、在线编辑器等。...实现方式: 1、 js + json + 第三方js脚本、控件 2、 json对表单进行描述,比如标题、控件类型、控件大小、下拉列表框的item如何填充等。...4、 Js脚本根据json的描述,创建表单(table形式),创建表单里面的控件(比如文本框),然后对表单和控件进行修饰。 5、 提取用户输入的数据,然后进行验证。...Nature.Controls.Form(formEvent); form.create(); $("#divButton").show();...问:还有其他的功能吗? 答:当然还有其他的功能,比如设置文本框 只读(readonly),设置默认,设置帮助信息,表单布局等,这些都可以通过修改json的属性来实现。

    3.5K81

    HTML表单(下)

    然后组件的list属性里指定标签的id属性即可实现下拉框的效果,示例: ? 运行结果: ?...所以submit中支持标签的全部属性,只不过是属性名称的前面多了个form而已。 接下来我们使用w3c的服务器接收页面来看看name属性的作用: ? 运行结果: ?...服务器接收页面就会把name的指向你页面输入的数据: ? 所以name属性是用来给服务器识别你输入的数据的 如果把formmethod的设置为post的话,提交的数据就不会显示出来,示例: ?...value属性单选框的应用示例: ? 运行结果: ? 服务器就会把name指向value: ? 复选框应用也是一样的: ? 运行结果: ? 服务器接收页面: ?...表单组件之列表框和下拉框 select主要是用来实现下拉框和列表框效果的,也是使用option来填充数据,我们先来实现一个下拉框,示例: ?

    2.6K20

    6.HTML输入表单标签元素介绍

    : 定义输入控件。 : 定义多行的文本输入控件。 : 定义按钮。 : 定义选择列表下拉列表)。...HTML5 不支持 0x00 表单标签元素 form 标签 描述: 表单是一个包含表单元素的区域,表单元素是允许用户表单输入内容,其包含 文本框、文本域(textarea)、按钮、下拉列表、单选框...enctype 属性: 规定在向服务器发送表单数据之前如何对其进行编码, POST 请求使用其为(text/plain、multipart/form-data、application/x-www-form-urlencoded...)域应该拥有自动填充功能,某些浏览需要开启自动填充才能使其生效, 设置 on 或 off。...date pickers)域应该拥有自动填充功能,某些浏览需要开启自动填充才能使其生效。

    4.6K10

    IT课程 HTML基础 013_表单和用户输入

    -- 表单元素在这里 --> 元素定义了用户输入数据的区域,并且可以包含不同类型的输入元素,如文本域、下拉列表、单选框、复选框...如果设置为 on,则浏览器将会自动填充表单之前输入过的数据。 novalidate:用于指定是否验证表单数据。如果设置为 on,则表单数据提交之前将不会进行验证。 form 表单本身并不可见。...文本字段 表单,我们经常需要用户输入字母、数字等文本内容。这可以通过元素完成,其type属性设置为 “text”。...下拉列表(select) 下拉列表可以让用户从多个选项中选择一个。它由元素创建,并使用元素来定义选项。...disabled 属性用于指定下拉列表是否可用。 可以使用 size 属性来指定下拉列表可见选项的数量。

    9410

    前端表单输入框自动填充和覆盖逻辑的实现

    Web开发,动态表单的联动操作,是非常常见的需求,尤其是需要实现复杂逻辑时,更是不可或缺。...正好我在工作,好几次遇到了输入框内容需要被填充的需求,本文将会为你详细介绍这样的需求案例,展示具体实现的思路和实战代码。...当选中下拉菜单的某个选项时,将该选项的,会自动填充输入。但如果输入框已经有用户手动输入,且该不在选项列表,则不覆盖。...实现思路我们来拆解下这个需求,把功能点进行拆分如下:input 为空,select 选中后自动填充;input 有,且为用户输入,则 select 选中后不填充;input 有,且为上次 select...自动填充很好实现,select 的 change 事件进行赋值就好了,难点在于如何判断当前的 input 的,是用户输入的,还是 select 填充的呢?

    56384

    【愚公系列】2023年11月 Winform控件专题 ComboBox控件详解

    使用ComboBox控件可以让用户选择某个选项,而不需要手动输入或选择其他类型的控件。它可以作为输入控件,也可以作为菜单控件使用。...DropDownList:此时ComboBox控件下拉列表以展开的形式显示,但是用户不能输入或编辑下拉列表的选项内容,只能从中选择一个选项。...在这里,我们将ComboBox控件的奇数行设置为红色,偶数行设置为黑色。实际开发,可以根据需求自行修改绘制代码,实现自定义的下拉列表项效果。...用户可以通过下拉列表选择一个选项。输入提示:ComboBox还可以用于输入提示,当用户输入文字时,下拉列表会自动过滤出与输入匹配的选项,用户可以选择一个选项或者继续输入。...在窗口的Load事件,使用以下代码填充ComboBox控件的选项:private void Form1_Load(object sender, EventArgs e){ // 添加学科选项到ComboBox

    1.9K12

    SAP ABAP

    DATA: "fieldcat GT_FIELDCATALOG TYPE LVC_T_FCAT, GW_FIELDCATALOG TYPE LVC_S_FCAT, *定义存储下拉列表的数据..."设置下拉 PERFORM CREAT_DROPDOWN_VALUES. "设置下拉框事件 PERFORM CREAT_EVENT_EXITS...." creat_fieldcat *---------------------------------------------------------------------* *根据物料的所有的语言生成不同的生成下拉列表..."CALLER_EXIT  需要注意的是:如果下拉框设置的是中文汉字,那么就不能输入了。 还有:下拉框设置了,并且设置了可编辑,此时编辑的时候只能输入下拉框中有的其他输入不进去。...方法二: ALV通过参考可以直接获取表搜索帮助,但是表字段没有搜索帮助或者不合要求就需要通过F4事件完成了。

    25720

    学习版pytest内核测试平台开发万字长文入门篇

    使用el-form标签添加用户名、密码、忘记密码和登录按钮。:model给表单绑定了数据对象,分别填充form.username、form.password、form.rememberMe: ?...用到了el-form和el-table标签。表格数据通过:data绑定到了tableData对象,调用后端接口后,从响应拿数据填充: ? 新增用户弹窗的入口也是放在这个文件的: ?...修改密码时,会对jwt进行解码,获取到user_id,然后检查老密码是否和数据库的密码hash一致。 前后端联调 根据以上思路把前后端的代码写完以后,就可以把项目跑起来看看效果了。...通过右上角下拉菜单修改密码,和老密码不匹配会提示修改失败,填写正确信息会修改成功,自动跳转到登录页面重新登录。输入老密码登录失败,输入新密码登录成功。...填写Mock Server的名字为hello,其他选项默认,点击Create Mock Server进行创建: ? 关闭后,Mock Server就建好了: ?

    4.9K30

    RESTClient 使用教程

    2.1.3.2 选择内容类型(Content-Type) 根据REST API消息体类型,对照下表,选择跟API匹配的内容类型,如果表的内容类型都不是API所需要的类型,可以直接在内容类型文本框输入所需类型...) 默认字符集是UTF-8,可以选择REST API所需要的字符集,如果下拉列表里的字符集都不是API所需要的,可以直接在字符集文本框输入所需的字符集。...其他系统可以根据提示框的报告路径,手动打开测试报告。...测试报告如图所示: [API测试报告] 2.5 对历史REST API生成API文档 如果需要生成API文档,RESTClient菜单栏点击 Apidoc => Create [生成API文档] API...其他系统可以根据提示框的文档路径,手动打开API文档。

    6.2K00

    如何在HTML的下拉列表包含选项?

    为了HTML创建下拉列表,我们使用命令,它通常用于收集用户输入的表单。为了提交后引用表单数据,我们使用 name 属性。如果没有 name 属性,则下拉列表中将没有数据。...用于将下拉列表与标签相关联;id 属性是必需的。要在下拉列表定义选项,我们必须在 元素中使用 标签。...价值发短信指定要发送到服务器的选项的倍数倍数通过使用,可以一次选择多个属性选项。名字名字它用于在下拉列表定义名称必填必填通过使用此属性,用户提交表单之前选择一个。...大小数此属性用于定义下拉列表可见选项的数量价值发短信指定要发送到服务器的选项的自动对焦自动对焦它用于页面加载时自动获取下拉列表的焦点例以下示例HTML的下拉列表添加一个选项 例以下示例,我们尝试使用 标签和 标签在列表添加选项 -<!

    25220

    【Web开发】Flask框架基础知识

    ,可以直接新建一个Flask模板文件,运行后,可以浏览器输出Hello World。...前端方面,通过form可以直接对接到后端定义的表单属性,其中python2需要添加 {{ form.csrf_token() }}来指定表单的token,python3版本,实测不需要该语句也能运行...,为decimal.Decimal FloatField 文本字段,为浮点数 BooleanField 复选框,为True和False RadioField —组单选框 SelectField 下拉列表...SelectMutipleField 下拉列表,可选择多个 FileField 文件上传字段 submitField 表单提交按钮 FormField 把表单作为字段嵌入另—个表单 FieldList...NumberRange 验证输入在数字范围内 URL 验证URL AnyOf 验证输入可选列表 NoneOf 验证输入不在可选列表 数据库 flask,可以利用SQLAlchemy

    2.1K20

    【Java 进阶篇】深入了解HTML表单标签

    HTML表单由多个HTML元素组成,包括文本框、密码框、单选按钮、复选框、下拉列表等。 创建HTML表单 要创建HTML表单,你需要使用标签。...name属性用于将单选按钮或复选框分组,确保用户只能选择一个单选按钮或多个复选框的选项。 下拉列表 下拉列表允许用户从预定义的选项中选择一个。它使用和标签创建。...> 在上面的示例,我们创建了一个选择国家的下拉列表。...用户可以从下拉列表中选择一个国家。 提交按钮 提交按钮允许用户将表单数据提交给服务器进行处理。使用标签的type="submit"属性创建提交按钮。 示例: <!...验证输入客户端和服务器端都进行数据验证,以确保输入数据的有效性和安全性。 提供默认:对于文本框和下拉列表等元素,可以提供默认以简化用户操作。

    22510

    Jquery 常见案例

    5 (17)min:10                       输入不能小于10 【】使用jqyery.form插件实现表单AJAX提交 1.引入jquery.form <script src=...这个方法将会清空所有的文本框,密码框,文本域里的,去掉下拉列表所有被选中的项,让所有复选框和单选框里被选中的项不再选中。...medicineSelection").change(function(){ medicineNo=$(this).val(); alert(medicineNo); }); }); /* 使用JS编程方式填充下拉框...,请求的Action返回列表的JSON方式,取得JSON的列表后,编程遍历每个元素,并填充到原有下拉框的选项。...=data.medicineList; //清空下拉框  $("#medicineSelection").empty();             //遍历每个药品,填充下拉框的选项 if(list.length

    6.7K10

    Angularjs基础(十二)

    ng-model-options       描述:规定如何更新模型             实例: 失去焦点时绑定输入框的scope 变量。                 ...ng-options         描述:列表中指定           实例:使用数组元素填充下拉列表:         <div ng-app="myApp...ng-options指令使用数组来<em>填充</em><em>下拉</em><em>列表</em>,多次情况下与ng-repeat 指令一起使用。               ...option>Ford                    定义和用法:             ng-selected 指令用于设置<em>列表</em><em>中</em>的...语法:         参数值: <em>值</em>: expression 描述: 表单提交后函数被调用,或者一个表达式将被执行,表达式返回函数调用

    3.1K100

    Jump Start Bootstrap 第3章

    本节,我们将重点讨论如何使用Bootstrap推荐创建可重用的HTML组件标记和类。让我们从页眉开始。...您可以如下这样,轻松地将导航导航列表的 元素转换为下拉菜单:【注:尝试在下拉菜单包含下拉菜单失败】 <div class...水平表单 之前的表单,我们顶部和输入字段显示了一个标签。假设我们要将标签显示输入字段的一侧。...代码,我们已经根据Bootstrap的规则,将表单的类从”form”替换为”form-horizontal”。然后我们元素添加了一个类”col-xs-2”,因此它跨越两个网格。...如果用户输入字段输入无效时,想要显示一些自定义文本,请使用带有类帮助块的元素。当输入无效时,帮助块将出现在对应的输入字段之下。

    13.9K20

    postman系列(二):使用postman发送get or post请求

    request url处输入请求url; 3....点击Params,会弹出键值输入框,可以添加多个参数,填写好的参数会自动拼接到url(如果添加的url已经有参数,postman会自动将url的参数分成键-对两部分),当然也可以根据需要在Headers...「POST请 求」 POST方法一般用来向服务器输入数据,它把提交的数据放置是HTTP包的包体 1.请求方法选择POST; 2.request url处输入请求url; 3.请求方法选为POST后...,请求栏下的Body栏会高亮,也就是可以向request body填充数据(添加再body种的参数并不会追加到url后面) Body中有4种数据填充形式,分别为:form-data、x-www-form-urlencoded...我们可以通过从“语言检测”下拉列表中选择“JSON”,或者SETTINGS模式内的常规选项卡下强制默认显示为JSON格式。 Raw Raw视图只是最原始的方式显示响应报文的内容。

    3.4K31
    领券