Override <option></option> template generation to add data-attribute

[james-em]

Hi,

Is there a way to override select's options generation? I'm not talking about the visual aspect but really the
<option> tag.

Motivation

I have an ajax select where I want to be able to add custom data-attributes into them like so

<select multiple="multiple">
  <option data-something="true">Item 1</option>
  <option data-something="false">Item 2</option>
  <option data-something="true">Item 3</option>
</select>

and then I want to be able to

dropdown.querySelectorAll("option:checked").forEach((o) => {
   if (o.dataset.something === "true") {
      // do something
   }
});

Thank you

[james-em]

I found a workaround that works perfectly for me !

onChange: function (value) {
      Object.values(this.options).forEach((ajaxOption) => {
        // Could be duplicated because of how ts behave.
        const originalOptions = this.input.querySelectorAll(`option[value="${ajaxOption.value}"]`);
        originalOptions.forEach((originalOption) => {
          Object.keys(ajaxOption).filter((k) => k.startsWith("data-")).forEach((key) => {
            originalOption.dataset[key.replace("data-", "")] = ajaxOption[key];
          });
        });
      });
    }

Backend usage

render json:

{ items: results.map { |r| { text: r.name, value: r.id, "data-other": r.other? } } }

data-other attribute will be appended automatically to tags

[iamB0rgy]

This doesn't work for me.