Question

我正在尝试处理某些事情，如果您单击某个特定元素，它将更新下拉选择以匹配div的data属性。

在大多数情况下，这就是我所拥有的：

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添加到具有匹配数据属性的选项值。

我知道我的错误是正确的，但是我试图从逻辑上将其从我试图摆脱的想法中消除出来。

Answer 1

可以使用jQuery来设置选择器，方法是将 select对象的值设置为您要为其设置的选项的值，即$('.js-example-basic-single').val('#sedans-10')。

对于您而言，您将必须选择或将数据属性的值与select中的选项的值相匹配

即data-vehicle="#sedan-10"或option value="sedan"

，然后通过调用以下方法将select的值设置为数据值：

$('.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
    }
});

Answer 2

在此演示中，将列表链接到所选内容的基本上是：

确定所选链接的索引位置：
```
var idx = $active.index();
```
然后找到相应的选项：
```
var $select = $('option').eq(idx);
```
查找选定的选项值属性。通过分配一个与值属性具有相同值的data-*属性，可以使此操作变得更加容易。
```
<option data-select='sedan-2' value='sedan-2' disabled>
...
var val = $select.data('select');
```
尽管知道所选选项的值，但可以通过<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>

jQuery单击更改基于数据属性的选定选项

2 个答案: