Build options of select field by value of another field in the same page

I’m just to dumb to get the solution. Please help me.

I have several pages with subpages:

PAGE A
    SUBPAGE A1
    SUBPAGE A2
    SUBPAGE A3

PAGE B
    SUBPAGE B1
    SUBPAGE B2
    SUBPAGE B3

PAGE C
    SUBPAGE C1
    SUBPAGE C2
    SUBPAGE C3

Now I have a slider and I want to link the slider elements based on two fields: PAGE and SUBPAGE. So in my blueprint I will integrate two select fields and for the first one (to select PAGE A, B or C) I’m using it like this:

anchor_rubrik:
	label: Anker Rubrik
	type: select
	default: ''
	options: query
	query:
		page: /
		fetch: visibleChildren
		value: '{{slug}}'
		text: '{{title}}'

Then I want my options in the second field based on the value of the first field. So when I chose PAGE B for the field “anchor_rubrik” I want the options [ SUBPAGE B1, SUBPAGE B2, SUBPAGE B3 ] for my field “anchor_single”.

How can I achieve this?

Thanks in advance for the help!

You need a custom field with some JS that listens on the first field and then fetches and injects the options into the second field.

Is there any example out there for inspiration? :wink:

Maybe you can find something here, I can’t recall a particular plugin at the moment…

is there a way to do it without JS, maybe after saving the document you will get all the options?

That should be possible, if your field queries a field on the same page, but probably isn’t very intuitive if the user has to save the page before being able to select another field option.

See https://getkirby.com/docs/cheatsheet/panel-fields/select, option from other field.

I’m doing it now like this. Then I can see in the list what is the URL tree of the file. It works and that’s okay for me now.

Thanks anyway for your help!!!

link:
	label: Link
	type: select
	default: ''
	options: query
	query:
		page: /
		fetch: visibleGrandchildren
		value: '{{slug}}'
		text: '{{uri}}'

Yep, that is a lot less overhead, as long as the list doesn’t get too long.