formio

Formio conditional select


I use the library formio.js and I'm trying to filter options in a selectbox according to selected value of another selectbox in the form. I understood how you can do it with external source as described here

But I don't understand how I can do it without external source. In the example in the link above, you see that the selected value of the first selectbox is passed in the URL that gets the content of the second selectbox server side. But in my situation I can't make the query to the server, I want to filter the data defined directly in the component. Is that possible?


Solution

  •      {
      "label": "Columns",
      "columns": [
        {
          "components": [
            {
              "label": "Select",
              "widget": "choicesjs",
              "tableView": true,
              "data": {
                "values": [
                  {
                    "label": "a",
                    "value": "a"
                  },
                  {
                    "label": "b",
                    "value": "b"
                  },
                  {
                    "label": "c",
                    "value": "c"
                  },
                  {
                    "label": "d",
                    "value": "d"
                  }
                ]
              },
              "key": "select",
              "type": "select",
              "input": true
            }
          ],
          "width": 6,
          "offset": 0,
          "push": 0,
          "pull": 0,
          "size": "md",
          "currentWidth": 6
        },
        {
          "components": [
            {
              "label": "Select 1",
              "widget": "choicesjs",
              "tableView": true,
              "dataSrc": "custom",
              "data": {
                "custom": "component.data.allValues = {\r\n  a: [\r\n    {\r\n      label: \"Sample A\",\r\n      value: \"sampleA\"\r\n    },\r\n    {\r\n      label: \"Sample B\",\r\n      value: \"sampleB\"\r\n    }\r\n  ],\r\n  b: [\r\n    {\r\n      label: \"item A\",\r\n      value: \"itemA\"\r\n    },\r\n    {\r\n      label: \"item B\",\r\n      value: \"itemB\"\r\n    }\r\n\r\n  ],\r\n  c: [],\r\n  d: []\r\n};\r\n\r\nvalues = data.select ? component.data.allValues[data.select] || [] : [];",
                "allValues": {
                  "a": [
                    {
                      "label": "Sample A",
                      "value": "sampleA"
                    },
                    {
                      "label": "Sample B",
                      "value": "sampleB"
                    }
                  ],
                  "b": [
                    {
                      "label": "item A",
                      "value": "itemA"
                    },
                    {
                      "label": "item B",
                      "value": "itemB"
                    }
                  ],
                  "c": [],
                  "d": []
                }
              },
              "dataType": "string",
              "refreshOn": "select",
              "clearOnRefresh": true,
              "key": "select1",
              "type": "select",
              "input": true
            }
          ],
          "width": 6,
          "offset": 0,
          "push": 0,
          "pull": 0,
          "size": "md",
          "currentWidth": 6
        }
      ],
      "key": "columns",
      "type": "columns",
      "input": false,
      "tableView": false
    }
    

    Here we have 2 select components namely select and select 1. second component options are dependent on first component. Store all the available options for second component in a variable component.data.allValues. At the end assign the values to the select component as

    values = data.select ? component.data.allValues[data.select] || [] : [];
    

    here select is the api key used for first component.

    enter image description here

    in second component, data tab configuration, in Refresh Options On select the field on which the dropdown options are dependent on. this will refresh the options whenever there is a change in value of first component.