How to hide and auto select option using data-attributes?

Question

I have three dropdowns. I want 2 functionality in the below code.

Hide .variant-selector option if it is not available in name="id" dropdown.
Also I want to auto select name="id" as I select both dropdown class="variant-selector" Like this using data-attributes because when I select L and Red the will select XL / Red not the L / Red

In the script there is toLowerCase(); are used for data-size and data-color. But my data values is capitalize. I don't want to use toLowerCase();

$(document).ready(function() {
  $('.variant-selector').change(function() {
    const val = this.value.toLowerCase();
    const variant_type = this.dataset.type;
    const other_type = $('.variant-selector:not([data-type="' + variant_type + '"])')[0].dataset.type;

    $('.variant-selector option').attr('disabled', false);
    $('.variant-selector:not([data-type="' + variant_type + '"]) option').each(function() {
      const other_val = this.value.toLowerCase();

      if (!$('option').is('[data-' + variant_type + '="' + val + '"][data-' + other_type + '="' + other_val + '"]')) {
        this.disabled = true;
      }
    });

    var option = $(this).parent('form').find('.variant-selector').children(":selected").get().map(function(el) {
      return el.value
    }).join(" / ");
    $('select[name="id"] option:contains(' + option + ')').prop('selected', true);

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" method="post">
  <select class="variant-selector" data-type="Size">
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
    <option value="XL">XL</option>
  </select>
  <select class="variant-selector" data-type="Color">
    <option value="Grey">Grey</option>
    <option value="Red">Red</option>
    <option value="White">White</option>
  </select>
  <br>
  <select name="id">
    <option data-size="M" data-color="Grey" value="M / Grey">M / Grey</option>
    <option data-size="L" data-color="Grey" value="L / Grey">L / Grey</option>
    <option data-size="S" data-color="Red" value="S / Red">S / Red</option>
    <option data-size="L" data-color="Red" value="L / Red">L / Red</option>
    <option data-size="M" data-color="White" value="M / White">M / White</option>
    <option data-size="L" data-color="White" value="L / White">L / White</option>
    <option data-size="XL" data-color="Red" value="XL / Red">XL / Red</option>
  </select>
</form>

Ok now what is problem? I ran your code and disable other dropdown correctly — Alireza Ahmadi, Jul 08 '21 at 06:05
When I select `L` and `Red` they will select `XL / Red` not the `L / Red`. I want to solve this using `data-attribute`. — Anupam Mistry, Jul 08 '21 at 06:13
Why do you ask the same question again? https://stackoverflow.com/questions/68210288/how-to-hide-dropdown-option-if-it-is-not-available/68211286#68211286 — biberman, Jul 09 '21 at 10:51
It was an urgent situation and I guess you're not available. — Anupam Mistry, Jul 09 '21 at 12:38

score 1 · Accepted Answer · edited Jul 09 '21 at 10:47

You don't need toLowerCase() also instead of option:contains it's better to use option[value]

Try this:

$(document).ready(function() {
  $('.variant-selector').change(function() {
    const val = this.value;
    const variant_type = this.dataset.type;
    const other_type = $('.variant-selector:not([data-type="' + variant_type + '"])')[0].dataset.type;

    $('.variant-selector option').attr('disabled', false);
    $('.variant-selector:not([data-type="' + variant_type + '"]) option').each(function() {
      const other_val = this.value

      if (!$('option').is('[data-' + variant_type + '="' + val + '"][data-' + other_type + '="' + other_val + '"]')) {
        this.disabled = true;
      }
    });
    var option = $(this).parent('form').find('.variant-selector').children(":selected").get().map(function(el) {
      return el.value
    }).join(" / ");

    var stringOption = "'" + option + "'";
    $('select[name="id"] option[value=' + stringOption + ']').prop('selected', true);

  });
});

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<form action="#" method="post">
  <select class="variant-selector" data-type="Size">
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
    <option value="XL">XL</option>
  </select>
  <select class="variant-selector" data-type="Color">
    <option value="Grey">Grey</option>
    <option value="Red">Red</option>
    <option value="White">White</option>
  </select>
  <br>
  <select name="id">
    <option data-size="M" data-color="Grey" value="M / Grey">M / Grey</option>
    <option data-size="L" data-color="Grey" value="L / Grey">L / Grey</option>
    <option data-size="S" data-color="Red" value="S / Red">S / Red</option>
    <option data-size="L" data-color="Red" value="L / Red">L / Red</option>
    <option data-size="M" data-color="White" value="M / White">M / White</option>
    <option data-size="L" data-color="White" value="L / White">L / White</option>
    <option data-size="XL" data-color="Red" value="XL / Red">XL / Red</option>
  </select>
</form>

Sure I'll update the answer. With using `var stringOption = "'" + option + "'";` — Alireza Ahmadi, Jul 08 '21 at 06:49
Does the selection work without `var option`. Instead of can `join` we use `data-attribute` like `[data-' + variant_type + '="' + val + '"][data-' + other_type + '="' + other_val + '"]` for auto select `name="id"` — Anupam Mistry, Jul 08 '21 at 08:40
I think you can do it. you have some ways to get value of options — Alireza Ahmadi, Jul 08 '21 at 08:51
Hi. How can I reset the change function to the initial state with a button click? — Gedanggoreng, May 17 '23 at 22:18

How to hide and auto select option using data-attributes?

1 Answers1

Linked