TW Element For Select component can custom html options

[AndoruKun]

Hi there, i don't know this are ideas or request already submited or not,

but i got a project that need to custom the option list with inner HTML. Its hard for me to defined class with javascript to add new innerHTML

maybe you guys can insert this idea

this i have some design for custom option

thank you

[juujisai]

You can use secondaryText for this. https://tw-elements.com/docs/standard/forms/select/#secondary-text
But if you need the innerHTML then you would have to look for the data-te-select-option-text-ref with querySelectors and change it's value in JavaScript file after the Select initialization.

Just change some classes for the selectOptionText

  <select 
    data-te-select-init 
    data-te-class-select-option-text="group w-full flex justify-between items-center"
    >
    <option value="1" data-te-select-secondary-text="Secondary text">
      One
    </option>
    <option value="2" data-te-select-secondary-text="Secondary text">
      Two
    </option>
    <option value="3" data-te-select-secondary-text="Secondary text">
      Three
    </option>
    <option value="4" data-te-select-secondary-text="Secondary text">
      Four
    </option>
    <option value="5" data-te-select-secondary-text="Secondary text">
      Five
    </option>
  </select>

[AndoruKun]

Hai thank you for your information but i think for make globalComponent for can be flexible reuse that make effort to implemenetation
but thanks anyway