Блог

Я пытаюсь работать над чем-то, где, если вы нажмете на определенный элемент, он обновит выпадающий список, чтобы соответствовать атрибуту данных div.

По большей части, это то, что у меня есть:

HTML:

 <div class="selector">
  <select class="js-example-basic-single">
    <option value="#sedans-10" data-select="sedan" selected>Sedans</option> 
    <option value="#suvs-10" data-select="suv">SUVs</option> 
  </select>
</div>

<div class="list__vehicles">

  <div class="item--vehicle active" data-vehicle="sedan">
    <h2>Sedan #1</h2>
    <a class="link--select" href="#">Select This</a>
  </div>

  <div class="item--vehicle" data-vehicle="sedan">
    <h2>Sedan #2</h2>
    <a class="link--select" href="#">Select This</a>
  </div>

  <div class="item--vehicle" data-vehicle="suv">
    <h2>SUV #1</h2>
    <a class="link--select" href="#">Select This</a>
  </div>

  <div class="item--vehicle" data-vehicle="suv">
    <h2>SUV #2</h2>
    <a class="link--select" href="#">Select This</a>
  </div>
</div>
  

JS:

 var link = $('.link--select');
link.on('click', function(e){
  $(this).parent().addClass('active').siblings().removeClass('active');
  if ($('.active').data('vehicle') = $('.js-example-basic-single option').data('select')) {
    $('.js-example-basic-single option').val('selected');
  }
  e.preventDefault();
});
  

Ссылка на демонстрацию (CodePen):
https://codepen.io/ultraloveninja/pen/JVWQeb

В целом, я пытаюсь сопоставить атрибуты данных между элементами и селектором, если item--vehicle есть класс active , и если есть совпадение, добавьте selected к значению параметра атрибут данных соответствия.

Я знаю, что у меня неверно, но я пытался логически вывести это из того, что я пытался выбросить из головы.

Селектор можно установить с помощью jQuery, установив значение объекта select равным значению параметра, на который вы пытаетесь его установить, т.е. $('.js-example-basic-single').val('#sedans-10') .

В вашем случае вам нужно будет либо сопоставить значения атрибутов данных со значениями параметров в вашем select

т.е. data-vehicle="#sedan-10" или option value="sedan"

а затем установите значение select ‘s на значение данных, вызвав:

 $('.js-example-basic-single').val($('.active').data('vehicle'));
  

или сверьте с атрибутом данных каждого option :

 $('.js-example-basic-single option').each(function() {             //foreach option in select
    if($('.active').data('vehicle') == $(this).data('select')) {   //if data in div matches data in option
        $('.js-example-basic-single').val($(this).val());          //then set select to the value of that option
        return false;                                              //and stop the iteration
    }
});
  

В основном то, что связывает список с выбором в этой демонстрации:

1. Определите позицию индекса выбранной ссылки:

    var idx = $active.index();
     

2. Затем найдите соответствующий параметр:

    var $select = $('option').eq(idx);
     

3. Найдите выбранный атрибут значения параметра. Это упрощается путем присвоения data-* атрибута, который имеет то же значение, что и атрибут value .

    <option data-select='sedan-2' value='sedan-2' disabled>
   ...
   var val = $select.data('select');
     

4. Хотя значение выбранного параметра известно, выбор параметра программно выполняется с помощью <select>

    $('.selector').val(val);
     

 $('.link').on('click', linkOption);

function linkOption(e) {
  var $active = $(this).parent('.item');
  var idx = $active.index();
  var $select = $('option').eq(idx);
  var val = $select.data('select');

  $('.item').removeClass('active');
  $active.addClass('active');

  $('option').removeClass('select').prop('disabled', true).prop('selected', false);
  $select.addClass('select').prop('disabled', false).prop('selected', true);

  $('.selector').val(val);

}  

 :root {
  font: 500 small-caps 16px/1.3 Verdana
}

fieldset {
  padding: 10px 25px;
  width: fit-content;
}

select,
option {
  font: inherit;
  font-size: 7.75vh;
  font-weight: 400;
  height: 28px;
  line-height: 28px;
}

[enabled] {
  font-size: 7.75vh;
  font-weight: 700;
}

.item,
.link,
optgroup {
  font-size: 7.75vh;
  color: black;
}

.item {
  border-bottom: 1.5px solid transparent;
  padding-bottom: 3px;
}

.item:hover {
  border-bottom: 1.5px solid #1329F2;
  padding-bottom: 3px;
  color: #1329F2;
}

.selector,
.list {
  display: inline-block;
}

select {
  transform: translateY(-320%);
  width: 10ch;
  outline: none;
  color: #1329F2;
}

a {
  display: block;
  text-decoration: none;
  color: black;
  width: 100%;
  height: 100%;
}

a:hover,
a:active,
[selected],
.select,
.active,
.active .link {
  color: #1329F2;
}  

 <fieldset>
  <select class="selector">
    <optgroup label="Vehicle"></optgroup>
    <optgroup label="Sedan">
      <option data-select='sedan-1' value='sedan-1' disabled>
        Sedan #1
      </option>
      <option data-select='sedan-2' value='sedan-2' disabled>
        Sedan #2
      </option>
    </optgroup>
    <optgroup label="SUV">
      <option data-select='suv-1' value='suv-1' disabled>
        SUV #1
      </option>
      <option data-select='suv-2' value='suv-2' disabled>
        SUV #2
      </option>
    </optgroup>
  </select>
  <ol class="list">
    <li class="item">
      <a class="link" data-vehicle="sedan-1" href="#/">
   Sedan #1</a></li>
    <li class="item">
      <a class="link" data-vehicle="sedan-2" href="#/">
   Sedan #2</a></li>
    <li class="item">
      <a class="link" data-vehicle="suv-1" href="#/">
   SUV #1</a></li>
    <li class="item">
      <a class="link" data-vehicle="suv-2" href="#/">
   SUV #2</a></li>
  </ol>
</fieldset>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>