Creating Nested Input Fields (w/ d3.select)?

Community Help
1

I’m looking for a bit of help with inputs. I would like to have additional options be ‘revealed’ depending on a selection. For example:

Would you like to see a new form?

  • yes
    • new forms are great
    • this is something i must do
  • no
    • i prefer old forms
    • i have no need for a new form

In the past, I’ve accomplished this sort of thing using Bootstrap and showing or hiding a div element (this approach is modeled in the linked notebook). I can manually encode questions and link values to particular behaviors, but I am a bit stuck when in comes to utilizing Observable inputs. Also, I’d love to learn how to do this without relying on JQuery and external CSS stylesheets.

Is d3.select the right tool? I haven’t quite gotten in working yet, but I assume I can start with whatever I want (including an empty div with ID and/or class name), and then conditionally .remove() the content [working] or .append() in the desired new form element [stuck here]. Am I on the right track?

Please also share if you have a notebook with ‘nested’ or dependent fields that are shown / hidden on selection that could sever as a template/example! :pray:

Hope you’re all safe, comfortable, and healthy!

2

Here’s one approach:

1 Like
3

Thanks @mbostock! This is very helpful indeed.

I will continue to play around to see whether I can make the non-active fields hidden. I haven’t had a chance to try it yet, but after raising my question I realized I can probably use an ‘if … else’ statement (or a logical operator, as you used here) to return one or another input group back into the div. I’ll keep playing and will post again here as I made progress. Certainly your notebooks solved the conditional aspect of this question!

4

Sweet!!

… a couple more steps and options are rendered out according to selection AND (thanks to @mbostock) I can also return all selected values as a group. thanks again! :man_dancing:

1 Like
5

Thank you for this illustration. Is there a new method that supports this now? If not, I would like to know how to clear the secondary radio buttons upon click of primary cats/dogs selection, and how to wire up an event upon selection of the secondary radio button.

1 Like
6

It’s slightly different, but I recently learned how to listen to multiple filters:
https://observablehq.com/@aaronkyle/listen-to-multiple-filters

When learning, I referenced this:

1 Like
7

Thank you - very interesting. Also, thank you for the reference to synchronized inputs – I will review that before asking any further questions. What would be nice is a “dropdown tree” feature to allow selectiing a node within a tree structure.

1 Like