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

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

CodePudding user response：

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>