Add custom data attribute to ui component dropdown option with dynamic id

by Abdul Ahad   Last Updated January 13, 2018 21:09 PM

I am creating a custom drop-down field on checkout for region. I can't find how i can set custom data attribute to option with dynamic value. This is how i am sending data to region field.

public function regionsOptionArray()
    $regions = $this->getRegions();
    if (empty($regions)) {
        return [];
    $options = [];
    foreach ($regions as $key => $value) {
        $options[] = [
            'label' => $value['region'],
            'value' => $value['region'],
            'region' => $value['id']
    return $options;

This is my custom component field

<select class="select" data-bind="
    attr: {
        name: inputName,
        id: uid,
        disabled: disabled,
        'aria-describedby': getDescriptionId(),
        'aria-required': required,
        'aria-invalid': error() ? true : 'false',
        placeholder: placeholder
    hasFocus: focused,
    optgroup: options,
    value: value,
    optionsCaption: caption,
    optionsValue: 'value',
    optionsText: 'label',
    optionsAfterRender: function(option, item) {
        if (item && item.disabled) {
            ko.applyBindingsToNode(option, {attr: {disabled: true}}, item);
        if (item) {
            ko.applyBindingsToNode(option, {attr: {'data-region': item.region}}, item);

Value and Label is working fine but can't get Region as data attribute of option.

Tags : magento-2.1

Related Questions

Magento 2 Checkouts page customization

Updated May 21, 2017 16:09 PM

Shopping cart price rule shipping issue

Updated May 16, 2018 16:09 PM