Filter second select based on first select (Filtering In Array)

Question

First of all, I found few similar posts, but they do not exactly same as this one. Because in my case i need to filter like in_array value.

I have 2 select options. First, Products list. Second, Suppliers List. One product might have multiply suppliers. I pass supplier ids in data-suppliers in html as string. How can i make it array and use as filter in second select option list. Or any other ways to do it?

My html:

<select id="products">
   <option data-suppliers="1" value="apple">Apple</option>
   <option data-suppliers="1,3" value="olive">Olive</option>
   <option data-suppliers="1,2,5" value="lemon">Lemon</option>
   <option data-suppliers="4,6" value="tea">Tea</option>
<select>

<select id="suppliers">
   <option value="1">Firm-A</option>
   <option value="2">Firm-B</option>
   <option value="3">Firm-C</option>
   <option value="4">Firm-D</option>
   <option value="5">Firm-E</option>
   <option value="6">Firm-F</option>
<select>

JS Code:

$('#suppliers').first().hide();

$("#products").change(function() {
if ($(this).data('options') === undefined) {
  $(this).data('options', $('#suppliers option').clone());
  $('#suppliers').first().show();
}
var ids = $(this).find(":selected").data('suppliers');
console.log(ids);

var options = $(this).data('options').filter('[value*=' + ids + ']');
$('#suppliers').html(options);
});

JSFIDDLE

Carsten Løvbo Andersen · Accepted Answer · 2022-02-24 09:17:23Z

1

You can try do it like this:

$("#products").change(function() {
  var ids = $(this).find(":selected").data('suppliers').split(",");
  var n = null;
  $('#suppliers option').hide().filter(function() {
    var p = ids.indexOf($(this).val()) > -1;
    if (p && n == null) {
      n = $(this).val()
    }
    return p
  }).show();
  $('#suppliers').show();
  $('#suppliers').val(n)
});

First I hide all options in the supplier select, then I filter the options to get thoses that match the criteria from products and show those. At the end I set the supplier value to the first visible option, else you would see a hidden option as default.

Demo

$('#suppliers').hide();

$("#products").change(function() {
  var ids = ($(this).find(":selected").data('suppliers') + "").split(",");
  var n = null;
  $('#suppliers option').hide().filter(function() {
    var p = ids.indexOf($(this).val()) > -1;
    if (p && n == null) {
      n = $(this).val()
    }
    return p
  }).show();
  $('#suppliers').show();
  $('#suppliers').val(n)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="products">
  <option data-suppliers="1" value="apple">Apple</option>
  <option data-suppliers="1,3" value="olive">Olive</option>
  <option data-suppliers="1,2,5" value="lemon">Lemon</option>
  <option data-suppliers="4,6" value="tea">Tea</option>
</select>

<select id="suppliers">
  <option value="1">Firm-A</option>
  <option value="2">Firm-B</option>
  <option value="3">Firm-C</option>
  <option value="4">Firm-D</option>
  <option value="5">Firm-E</option>
  <option value="6">Firm-F</option>
</select>

edited Feb 24, 2022 at 9:17

answered Feb 24, 2022 at 8:59

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

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

4 Comments

DrWalt Bishop Over a year ago

this code is almost working, I tested it, there is only one error. When you select Olive, then try to select Apple. It gives an error.

Carsten Løvbo Andersen Over a year ago

@DrWaltBishop Try demo now

DrWalt Bishop Over a year ago

thanks working :) do you mind, to tell what was the problem?

Carsten Løvbo Andersen Over a year ago

@DrWaltBishop Problem was that when we get the value from data-suppliers="1" it's read as a number, but data-suppliers="1,3" is read as a string. So had to convert it all to a string

Collectives™ on Stack Overflow

Filter second select based on first select (Filtering In Array)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related