Как добавлять атрибут selected при клике на ссылку?

Question

Как добавлять атрибут selected при клике на ссылку? Как связать условием одинаковые id ссылку и id значения пункта который нужно сделать selected?

<article id="id_14" class="encounter">
  <a class="encounter-inner" href="">
  <div class="blue || preserve-image-ratio standard" style="background-image: url();">
  </a>
</article>

<label class="form-sub-label">
<select class="form-dropdown" size="1" >
<option value="id_14" selected>1</option>
<option value="id_15">2</option>
<option value="id_16">3</option>
</select>
</label>

Answer 1

document.querySelectorAll('.encounter').forEach(item => {
    item.addEventListener('click', event => {
        document.querySelectorAll('.form-dropdown option').forEach(option => {
          if (option.getAttribute('value') === item.getAttribute('id'))
            option.selected = 'selected';
          else
            option.removeAttribute('selected');
        });
    });
});

<article id="id_14" class="encounter">14
  <a class="encounter-inner" href="">
    <div class="blue || preserve-image-ratio standard" style="background-image: url();">
  </a>
</article>
<article id="id_15" class="encounter">15
  <a class="encounter-inner" href="">
    <div class="blue || preserve-image-ratio standard" style="background-image: url();">
  </a>
</article>
<article id="id_16" class="encounter">16
  <a class="encounter-inner" href="">
    <div class="blue || preserve-image-ratio standard" style="background-image: url();">
  </a>
</article>
<label class="form-sub-label">
<select class="form-dropdown" size="1" >
<option value="id_14" selected>14</option>
<option value="id_15">15</option>
<option value="id_16">16</option>
</select>
</label>

БЛОГ НА HUSL

Как добавлять атрибут selected при клике на ссылку?

Ответы (1 шт):