Tinydash Widgets

This is an attempt to create a dropdown menu.

HTML:

            d: TD.dropdown({
                x: 10, y: 505, width: 200, height: 25,
                label: "A dropdown",
                name: "dropdown",
                items: ["Link 1", "Link 2", "Test entry"],
                onchange: function(e, v) {
                  console.log(e + " " + v);
                  ws.send(JSON.stringify(e));
                }
            }),

css:

.td_dropdown {
  -webkit-appearance: none;
  background: var(--forecolor);
}
.td_dropdown select {
  background-color: var(--forecolor);
  color: [#fff](https://forum.espruino.com/search­/?q=%23fff);
  font-size: 16;
  border: 0;
  border-radius: 3px;
  width: 100%;
  height: 100%;
  text-overflow: '';
  padding-right: 1.25em;
}
.td_dropdown select option {
  font-size: inherit;
  text-align: center;
}
.td_dropdown select::-ms-expand { /*Hiding the select arrow for IE10*/
    display: none;
}

js:

    TD.dropdown = function(opts) {
      function a(arr) {
        var txt = "";
        arr.forEach(function(item, indice, array) {
          txt += `<option value="${item}">${item}</option>`;
        });
        return txt;
      }
      var el = setup("dropdown", opts, toElement(`<div class="td"><span class="td_dropdown"><select name="${opts.name}">${a(opts.items)}</se­lect></span></div>`));
      document.addEventListener('DOMContentLoa­ded', function() {
        document.querySelector('select[name="'+o­pts.name+'"]').onchange = function(x) {
          sendChanges(el, x.target.value);
        };
      }, false);
      el.setValue = function(v) {
      };
      return el;
    };

1 Attachment