Component – Advanced Custom Select

Custom Select with advanced structure options.Download + DemoView DemoDownload ComponentHow To
The Advanced Custom Select component is used to override the native select appearance and replace it with a custom control and a custom dropdown.
Dropdown st…


This content originally appeared on CodyHouse and was authored by CodyHouse

Custom Select with advanced structure options.Advanced Custom Select

Download + Demo

How To

The Advanced Custom Select component is used to override the native select appearance and replace it with a custom control and a custom dropdown.

The dropdown structure can be customized by modifying the content of the .js-adv-select-popover element.

<select> with <optgroup> elements #

The basic dropdown structure (.js-adv-select-popover content) is:

<div class="adv-select-popover__optgroup" role="group" describedby="optgroup-label">
  <div class="adv-select-popover__label" id="optgroup-label">{optgroup-label}</div>
  <div class="adv-select-popover__option" role="option">{option-label}</div>
</div>

where:

  • .adv-select-popover__label is the label of the <optgroup> element; {optgroup-label} will be replaced by the <optgroup> label attribute;
  • .adv-select-popover__option is the option element; {option-label} will be replaced by the <option> label.

The template used for the option elements can be customized based on your project needs. For example, if you want to include an image next to the option text, modify the template as follows:

<div class="adv-select-popover__optgroup" role="group" describedby="optgroup-label">
  <div class="adv-select-popover__label" id="optgroup-label">{optgroup-label}</div>
  <div class="adv-select-popover__option" role="option">
    <img src="{img-src}" alt="{img-alt}">
    <span>{option-label}</span>
  </div>
</div>

To each <option> in the native <select> element, make sure to add a data-img-src and data-img-alt to pass the image src and alt attribute respectively:

<select>
  <optgroup label="Group 1">
    <option value="1" data-img-src="image-1.png" data-img-alt="Image 1 Description">Option 1</option>
    <option value="2" data-img-src="image-2.png" data-img-alt="Image 2 Description">Option 2</option>
    <option value="2" data-img-src="image-3.png" data-img-alt="Image 3 Description">Option 3</option>
  </optgroup>
</select>

<select> with <option> elements only #

The basic dropdown structure (.js-adv-select-popover content) is:

<div class="adv-select-popover__option" role="option">{option-label}</div>

You can customize this template (see Select with <optgroup> elements section).

Control Button #

The .js-adv-select__control button is the dropdown control element. Its aria-controls attribute needs to be equal to the id of .js-adv-select-popover element.

When an option in the dropdown is selected, the content of its child .js-adv-select__value element is updated with the selected option content.


This content originally appeared on CodyHouse and was authored by CodyHouse


Print Share Comment Cite Upload Translate Updates
APA

CodyHouse | Sciencx (2021-04-02T08:16:08+00:00) Component – Advanced Custom Select. Retrieved from https://www.scien.cx/2021/04/02/component-advanced-custom-select/

MLA
" » Component – Advanced Custom Select." CodyHouse | Sciencx - Friday April 2, 2021, https://www.scien.cx/2021/04/02/component-advanced-custom-select/
HARVARD
CodyHouse | Sciencx Friday April 2, 2021 » Component – Advanced Custom Select., viewed ,<https://www.scien.cx/2021/04/02/component-advanced-custom-select/>
VANCOUVER
CodyHouse | Sciencx - » Component – Advanced Custom Select. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/02/component-advanced-custom-select/
CHICAGO
" » Component – Advanced Custom Select." CodyHouse | Sciencx - Accessed . https://www.scien.cx/2021/04/02/component-advanced-custom-select/
IEEE
" » Component – Advanced Custom Select." CodyHouse | Sciencx [Online]. Available: https://www.scien.cx/2021/04/02/component-advanced-custom-select/. [Accessed: ]
rf:citation
» Component – Advanced Custom Select | CodyHouse | Sciencx | https://www.scien.cx/2021/04/02/component-advanced-custom-select/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts