How to html drop-down list

I would like to fill an html drop-down list from values in an array.

Poor me I have just managed to write

viewof value = html`<input type=select>`

Any hints is welcome

1 Like

Now going further into the tutorial material I discovered how to create such a static drop-down list


The question remains for having the items in the menu coming from an array…

Say you have an array of color names:

colors = ["red", "green", "blue"]

You can use the convenience method to create a drop-down menu to choose one of them:

viewof color =

For more control over how the menu is rendered, use within the html tagged template literal:

viewof color = html`<select>${ => `
  <option value=${color}>${color}</option>`).join("")}

I really like the template literals and how easy it is to use values from other cells / javascript.

Here I set attributes and labels are different from values:

viewof selected_option = html`<select>${Object.keys(pre_defined_options).map((d) => 
  "<option value='" + d + "' " + (d === 'brocade' ? 'selected' : '') + " >" 
     + pre_defined_options[d].label 
     + "</option>")}

and pre_defined_options looks like

{ snow: { label: 'White stuff', other_attribute: 5 },
  brocade: { label: 'Japanese Brocade', other_attribute: 7 }

I’ve done something similar in

1 Like