根据第一个选择过滤第二个选择（在数组中过滤）

Question

首先，我发现很少有类似的帖子，但它们与这个并不完全相同。因为就我而言，我需要像 in_array 值一样进行过滤。

我有两个选择。首先，产品列表。二、供应商名录。一种产品可能有多个供应商。我将 html 中的 data-suppliers 中的供应商 ID 作为字符串传递。我如何使其数组并用作第二个选择选项列表中的过滤器。或者还有其他方法可以做到吗？

我的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代码：

$('#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

Answer 1

您可以尝试这样做：

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

首先，我隐藏 supplier 选择中的所有选项，然后过滤选项以获取与 products 中的条件匹配的选项并显示这些选项。最后，我将 supplier 值设置为第一个可见选项，否则您将看到默认的隐藏选项。

演示

$('#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>