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

[kriks999]

What I’m trying to do

I want to optimize my code notes so that when I click on a default value, I can see all possible values.

Things I have tried

I have already tried the plugin Meta Bind, but it did not have the right function, but there was a similar (date)

[holroy]

Where do you want to change stuff, is this an inline field, a frontmatter field, or just a random field/text like display: flex within a CSS block or similar?

For inline fields and frontmatter fields, I do believe you’ve got options related to the meta-bind plugin and the usage of classes. I’ve not used them myself, but I do believe I’ve seen similar use cases. You could possibly also use the autoprop of the Meta-Edit plugin

If you want to change random text/field within CSS or similar, I’ve not seen any plugins doing that, and I don’t see an easy way of achieving that through a plugin either, unless you make the plugin language aware, and then allow for some specific replace function on words (or words in a context).

[smiggles]

You can create an HTML select tag,

Display: <select>
    <option>inline</option>
    <option>block</option>
    <option>flex</option>
    <option>grid</option>
</select>

[I-d-as]

Cool! Out of curiosity, is there a way to get this to work in Live Preview? In Reading Mode it works great!

Thanks!

[kriks999]

Y’ar the best <3

[Twita]

this is super-cool, but doesn’t seem to work for inline fields…thanks !

[smiggles]

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;

[smiggles]

The reason it doesn’t work for Dataview inline fields is you’d be querying the HTML element, not the value within said element

If you did [heading::<h1>heading</h1>], it would not query heading, it would query <h1>heading</h1> (would still be stylized due to the rendering of html in dataview)

That said, it could be done using some DataviewJS. My schedule is packed but, I’ll make sure to look into it

[I-d-as]

This is sweet! Thanks for sharing!

It definitely can serve a purpose in some use cases. Perhaps it could be tweaked to remember the selection. As it stands, when I reopen Obsidian, the provided snippet returns to Option 1 regardless of which option was chosen previously.

Of course, it would be great if there were also a way to make this usable to set values for metadata. But there are plugins to accomplish this; however, they require a rendered table or dialogs to be interacted with. Perhaps, Buttons could be used, but a simple dropdown to change metadata would be quite elegant. Perhaps this already exists. Or, maybe something like this is soon approaching with Obsidian’s upcoming metadata improvements.

Thanks again for spending the time to share this! Very cool!