jQuery on click change selected option based on data attribute

Question

I'm trying to work on something where if you click on a specific element it will update the dropdown select to match the data attribute of the div.

For the most part, this is what I have:

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

Link to Demo (CodePen): https://codepen.io/ultraloveninja/pen/JVWQeb

Overall, I'm trying to match the data attributes between the items and the selector if item--vehicle has the class active, and if there is a match then add selected to the option value with the match data attribute.

I know what I have is incorrect, but I was trying to hash it out logically from what I was trying to get out of my head.

I do not quite understand what you mean by: "Overall, I'm trying to match the data attributes between the items and the selector if item--vehicle has the class active, and if there is a match then add selected to the option value with the match data attribute." Could you provide an example if I click on one (does not have to be a code example)? — Aaron3219
– Aaron3219, Commented Apr 10, 2019 at 22:10
@Aaron3219 Basically, if you click on one of the items it will check the data-vehicle attribute and if it matched the data-vehicle then it will either stay the same or switch the dropdown to that specific option. (e.g. If SUV #1 or SUV #2 is clicked then SUV will show selected, but if Sedan #1 or Sedan #2 is clicked then Sedan will be selected in the drop down). — ultraloveninja
– ultraloveninja, Commented Apr 11, 2019 at 1:41

carboncannonball · Accepted Answer · 2019-04-11 02:10:35Z

1

A selector can be set using jQuery by setting the value of the select object to the value of the option you're trying to set it to, i.e. $('.js-example-basic-single').val('#sedans-10').

In your case, you will have to either match the value of the data attributes to the values of the options in your select

i.e. data-vehicle="#sedan-10" or option value="sedan"

and then set the select's value to the data value by calling:

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

or check against the data attribute of each 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
    }
});

answered Apr 11, 2019 at 2:10

carboncannonball

1317 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ultraloveninja Over a year ago

Ok cool. Yeah, I was thinking about it some more last night and doing some more reading and I realized that I could probably just base it off the value as well, but checking against each data attribute works as well. Thanks!

zer00ne · Accepted Answer · 2019-04-11 07:24:47Z

Basically what links the list to the select in this demo is:

Determine the index position of the selected link:
```
var idx = $active.index();
```
Then locate the corresponding option:
```
var $select = $('option').eq(idx);
```
Find the selected option value attribute. This is made easier by assigning a data-* attribute that has the same value as the value attribute.
```
<option data-select='sedan-2' value='sedan-2' disabled>
...
var val = $select.data('select');
```
Although the value of selected option is known, selecting the option programmatically is done through the <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>

Collectives™ on Stack Overflow

jQuery on click change selected option based on data attribute

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related