🏠 back to Observable

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

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!

Here’s one approach:

1 Like

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!


… 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: