# dropdown menu without viewof

**URL:** <https://talk.observablehq.com/t/dropdown-menu-without-viewof/3068>\
**Category:** Uncategorized\
**Created:** [April 13, 2020, 10:31pm UTC](https://talk.observablehq.com/t/dropdown-menu-without-viewof/3068 "2020-04-13T22:31:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![mahviz](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mahviz/32/2930_2.png) [@mahviz](https://talk.observablehq.com/u/mahviz)\
**Post date:** [April 13, 2020, 10:31pm UTC](https://talk.observablehq.com/t/dropdown-menu-without-viewof/3068/1 "2020-04-13T22:31:54Z")

</div>

I’m teaching d3 using Observable, and want to show how to create dropdown menus. Because I want students to be able to use the code they are learning outside of Observable, I would prefer not to use Observable-specific functionality like viewOf. I’m having trouble getting select working with buttons for the equivalent of an html dropdown menu. I’d appreciate an example.

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [April 13, 2020, 11:45pm UTC](https://talk.observablehq.com/t/dropdown-menu-without-viewof/3068/2 "2020-04-13T23:45:17Z")

</div>

I’m sure there are lots of good examples across Observable; here’s a parametric region plotter that I made recently that has an “Examples” : drop down selector:

> **[Parametric Region](https://observablehq.com/@mcmcclur/parametric-region)**
>
> An Observable notebook by Mark McClure.

The general pattern is pretty much how you’d build a `div` with bells and whistles on any webpge:

```
let div = d3.create('div');
let selector = div.append('select');
selector
  .append('option')
  .attr('value', 'opt')
  .text('An option')
  .property('selected', true);
selector.on('change', function() {
 'do something!'
})
```

---

<div class="post-metadata">

**Author:** ![mahviz](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mahviz/32/2930_2.png) [@mahviz](https://talk.observablehq.com/u/mahviz)\
**Post date:** [April 14, 2020, 1:42am UTC](https://talk.observablehq.com/t/dropdown-menu-without-viewof/3068/3 "2020-04-14T01:42:02Z")

</div>

Thank you so much!  
There is one error in your code above: the first line should be  
let div = d3.create(‘div’)  
which I got from the linked code.

---

<div class="post-metadata">

**Author:** ![mahviz](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mahviz/32/2930_2.png) [@mahviz](https://talk.observablehq.com/u/mahviz)\
**Post date:** [April 14, 2020, 2:03am UTC](https://talk.observablehq.com/t/dropdown-menu-without-viewof/3068/4 "2020-04-14T02:03:16Z")

</div>

BTW I’m having trouble finding the “create” function in the d3 API, and I don’t recall seeing it before this.

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [April 14, 2020, 2:11am UTC](https://talk.observablehq.com/t/dropdown-menu-without-viewof/3068/5 "2020-04-14T02:11:04Z")

</div>

It’s part of `d3-selection`:

> **[d3/d3-selection](https://github.com/d3/d3-selection#create)**
>
> Transform the DOM by selecting elements and joining to data. - d3/d3-selection

I think it’s less common when building webpages because you can typically select something that’s already in the webpage and go from there. I’ve found it handy in some situations even there, though.

---

<div class="post-metadata">

**Author:** ![mahviz](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mahviz/32/2930_2.png) [@mahviz](https://talk.observablehq.com/u/mahviz)\
**Post date:** [April 14, 2020, 2:24am UTC](https://talk.observablehq.com/t/dropdown-menu-without-viewof/3068/6 "2020-04-14T02:24:20Z")

</div>

Thanks so much! I’ve never noticed this part of the selection API. Having a detached element in the current document is exactly what is needed. This was so helpful!