use data-custom-properties

[reimax]

hi, i have html select

<select>
  <option value="Test1" data-custom-properties="test">Test1</option>
  <option value="Test2" data-custom-properties="test">Test2</option>
  <option value="Test3" data-custom-properties="test">Test3</option>
</select>

i try get data-custom-properties after change

document.querySelectorAll("select[name=operation]").forEach(function(element) { 
        element.addEventListener("change", (event) => {
            var show_droplist = event.target.selectedOptions[0].attributes;
            console.log(show_droplist);
            
        });       
    });

and show_droplist have data-custom-properties: value: "[object Object]"

how get data attr from change options?

[mtriff]

I can duplicate this issue. It looks like it is a regression and will need to be fixed.

Also, you may want to use events provided by Choices instead of adding an event listener directly to the select elements. Such as:

<select  id="choicesTest">
  <option value="Test1" data-custom-properties="test">Test1</option>
  <option value="Test2" data-custom-properties="test">Test2</option>
  <option value="Test3" data-custom-properties="test">Test3</option>
</select>

const choicesTest = new Choices(document.getElementById('choicesTest'));
choicesTest.passedElement.element.addEventListener('change', (event) => {
  console.log(event.currentTarget.selectedOptions[0].dataset.customProperties);
});

[reimax]

in code:

<select class="choices__input" name="test" hidden="" tabindex="-1" data-choice="active">
<option value="2" **data-custom-properties="[object Object]"**>test</option>
</select>

from original html code properties not passed.

i need get properties stanalone. in my code i init Choices.js to all select on project. and in same time i need on page get properties on change. that's why I'm trying to find how to pass the parameter to .choices__inner block

[reimax]

if after init choices i use .desctroy() - all data-custom-properties lost on select element