Как менять содержимое селектов по дата-атрибутам?

Question

[svilkov87]

Всем привет и с Наступающими!

Есть два селекта, внутри которых option с дата-атрибутами.

Задача - показывать только те option из .b-discounts, в которых дата-атрибуты соответствуют дата-атрибутам из .b-fruts.
При этом без события .on( 'click, function () {, а просто показывать то или иное, исходя из дата-атрибутов
Например, выбран фрукт apple - показывается option, у которых data='apple'.

Ломаю голову уже много над этим.

Answer 1

[0xD34F]

<select class="b-fruits">
  <option>apple</option>
  <option>orange</option>
  <option>banana</option>
</select>

<select class="b-discounts">
  <option data-type="apple">100</option>
  <option data-type="apple">200</option>
  <option data-type="orange">300</option>
  <option data-type="banana">400</option>
</select>

$('.b-fruits').change(function() {
  $('.b-discounts')
    .val(null)
    .find('option')
    .hide()
    .filter(`[data-type="${$(this).val()}"]`)
    .show();
}).change();

// или

const fruits = document.querySelector('.b-fruits');
const discounts = document.querySelector('.b-discounts');

fruits.addEventListener('change', ({ target: { value } }) => {
  discounts.value = null;
  for (const n of discounts.options) {
    n.hidden = n.dataset.type !== value;
  }
});

fruits.dispatchEvent(new Event('change'));

Answer 2

[Александр]

Как-то так (правда нужно чуть доработать с текстом в самом селекте, но думаю сами справитесь):

$( function() {
  $('.b-fruts').change(function(){
    $('.b-discounts > option').hide();
    $('.b-discounts > option[data="'+ $(this).find('option:selected').attr('data') +'"]').show();
  }).trigger('change');

} );

Comments

[svilkov87]

представляю, как выглядел бы этот код на ванильном js))

Answer 3

[Евгений Калибров]

https://codepen.io/anon/pen/OzpKNm?editors=1111

$( function() {

  var frutsEl = $('.b-fruts');
  var discountsEl = $('.b-discounts');
  
  frutsEl.on('change', function(item) {
    var frut = $(this)
      .find('option[value="' + $(this).val() + '"]').attr('data');
    discountsEl
      .find('option')
      .hide()
      .filter('[data="' + frut + '"]')
      .show();
  
    discountsEl
      .val(
        discountsEl
          .find('option[data="' + frut + '"]:first')
          .attr('value')
        );
  });
  
  frutsEl.change();

} );

Comments

[svilkov87]

даже, с линтером. спасибо)