Choices: Passing attributes from html data

[kjugi]

Is there any support for data attributes from HTML? I want to pass the values on specific select item and only to it. Can't do it in JS by passing id or other attribute b/c it must me reusable element. And to all, I'm passing default values or same classes too. Can I in another way pass element 2 times or in 2 different ways?

The best way is to pass data attributes to select and when calling Choices with default values add this custom one if existing and pass as parameters too.

If want some code can prepare something or show concept

[jshjohnson]

You can't currently add custom properties via HTML but as of version 2.8.6, you can pass custom properties to items/choices via JS . Will re-open this if more people request this.

[sergonius]

It would be nice if the plugin allowed passing additional classes at least.

<select class="c-select c-select--dark">....</select>

after initialised with .c-select (new Choices('.c-select')), it will lose c-select--dark class.

Edit: ...and actually extending it to at least some other basic/popular functionality like placeholders and maybe some other options would rock.

Edit 2: I guess sending other params via a data attribute yourself is simple enough, but passing classes would still be useful for different variations/skins.

My solution for placeholders:

<select
  class="c-select"
  data-select-options='{"placeholderValue": "Select payment method"}'>
  ...
</select>

const selectWithOpts = document.querySelector('.c-select[data-select-options]');
const selectOptions = selectWithOpts && selectWithOpts.getAttribute('data-select-options');

new Choices(
  '.c-select[data-select-options]',
  JSON.parse(selectOptions),
);

[ChristopherRobinSuperStar]

It is very necessary and convenient to pass data-attributes. Please, add it.