Is there a plugin that allows you to make a drop down list like this?

Help
7

In Live Preview, the element is still seen as an embed so the event listener catches a click and thinks you want to edit the embed text

The reason it works in Read view is because you can’t edit text, of course

I found a workaround. Instead of using HTML, I made a dataviewJS query that creates the select element instead

```dataviewjs
const selectElement = dv.el('select');
const option1 = dv.el('option', "Option 1");
const option2 = dv.el('option', "Option 2");
const option3 = dv.el('option', "Option 3");

selectElement.appendChild(option1);
selectElement.appendChild(option2);
selectElement.appendChild(option3);

selectElement;
```

In order to reproduce this, create a constant variable for the select and every option. Define these constants as I did except replace the second string (ex. “Option 1”) with your text of choice.

Afterwards, append each child element to the select element

Make sure to remember the following,

  1. You need to add a new const with a new value for each additional element
  2. You need to append each additional constant variable

For example,

const selectElement = dv.el('select');
const option1 = dv.el('option', "Option 1");
const option2 = dv.el('option', "Option 2");
const option3 = dv.el('option', "Option 3");
/* new option */
const option4 = dv.el('option', "Option 4")

selectElement.appendChild(option1);
selectElement.appendChild(option2);
selectElement.appendChild(option3);
/* new option */
selectElement.appendChild(option4);

selectElement;
3 Likes