Как получить атрибут выбранного option'а?

Question

[ART4]

Имеется select:

<select name="variant" class="fn_variant variant_select {if $product->variants|count == 1}hidden{/if}" id="myselect">
                        {foreach $product->variants as $v}
                            <option for="{if $v->weight}{$v->weight}{/if}" value="{$v->id}" data-price="{$v->price|convert}" data-stock="{$v->stock}"{if $v->compare_price > 0} data-cprice="{$v->compare_price|convert}"{/if}{if $v->sku} data-sku="{$v->sku|escape}"{/if}>{if $v->name}{$v->name|escape}{else}{$product->name|escape}{/if}</option>
                        {/foreach}
                    </select>

где в option есть атрибут for.
Есть JS код:

document.getElementById("myselect").addEventListener("change", function () {
        document.getElementById('mydiv').innerHTML = "Вес брутто*: " + this.value;
    });

Он берёт данные с 1 места и заменяет на другом месте. Только данные берёт не с for, а с value. Пробовал заменить this.value на this.for, так не подходит, куда копать?

Answer 1

[dollar]

Попробуйте так:

document.getElementById("myselect").addEventListener("change",
  function () {
    let opt;
    for(let i=0;i<this.children.length;i++){
      let child = this.children[i];
      if(this.value == child.value) {
        opt = child;
        break;
      }
    }
    if(!opt)return;
    let for_attr = opt.getAttribute("data-price") || "???";
    document.getElementById('mydiv').innerHTML = "Вес брутто*: "
        + for_attr;
  }
);

Comments

[ART4]

NULL

Образец этот брал
jsfiddle.net/0kxe4s1f/3

[ART4]

[dollar]

Поправил.
Там дело в том, что у самого select (который this) нет атрибута for. Так что надо искать среди детей элемент. А как искать? По значению.

Answer 2

[0xD34F]

document.querySelector('#myselect').addEventListener('change', function(e) {
  const select = this;
  // или
  // const select = e.target;
  // const select = e.currentTarget;

  const [ option ] = select.selectedOptions;
  // или
  // const option = select[select.selectedIndex];
  // const option = select.querySelector(`[value="${select.value}"]`);
  // const option = select.querySelector('option:checked');
  // const option = [...select.children].find(n => n.selected);

  const forAttr = option.getAttribute('for');
  // или
  // const forAttr = option.attributes.for.value;

  document.querySelector('#mydiv').innerText = `Вес брутто*: ${forAttr}`;
});

Comments

[ART4]

Спасибо!