多个选定值的jQuery值

Question

我有一个多选列表的代码。一次选择一个项目时它可以工作。当我选择多个项目时，我想让它工作。

<select name="size1" multiple="multiple" id="ddYear"
        class="form-control input-sm">
<option value="">Select Manufacturers</option>
<?php
   $record = mysqli_query($con
          "SELECT DISTINCT Manufacturer
           FROM db
           WHERE Manufacturer in ('A', 'B', 'C', 'D', 'E', 'F')
           ORDER BY Manufacturer ASC");
   while ($row = mysqli_fetch_array($record)) {
      echo "<option value='" . $row['Manufacturer'] . "'>"
           . $row['Manufacturer'] . "</option>";
   }
?>
</select>

Js代码

 <script type="text/javascript">
   var $rows = $('#dataTables-example2 tbody tr');
   $('#ddYear').change(function() {
     var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
     $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
     }).hide();
   });
</script>

它适用于所选的一个项目（显示匹配的表行），但是当我选择两个项目时，它会隐藏我表格中的所有行（没有匹配）。 相反，我希望看到与所选项目之一匹配的行。

Answer 1

当您选择了多个元素时，jQuery会返回以逗号分隔的值列表，因此快速解决方案是创建要搜索的正则表达式，并用管道替换这些逗号（reg ex OR运算符）。

这样，您的代码只需要进行细微更改：

// create reg exp with pipes:
var val = new RegExp($.trim($(this).val()).replace(/ +/g, ' ').toLowerCase()
        .replace(/,/g, '|'));
$rows.show().filter(function() {
    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
    return !~text.search(val); // use search for reg ex
}).hide();

现在，如果列表中的值也包含逗号，您将获得可能匹配太多行的搜索模式，但我认为使用此信息可以在必要时进行改进。