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

Question

首先，我发现很少有类似的帖子，但它们与这篇帖子并不完全相同。因为在我的例子中，我需要像 in_array 值那样进行过滤。

我有 2 select 个选项。首先，产品列表。二、供应商名录。一种产品可能有多个供应商。我将 html 中 data-suppliers 中的供应商 ID 作为字符串传递。我怎样才能使它成为数组并在第二个 select 选项列表中用作过滤器。或者还有其他方法吗？

我的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 select 中的所有选项，然后我过滤选项以从 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>

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

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

jquery

drop-down-menu