使用 JavaScript 的多选过滤器

Question

我有选项标签，它与单个过滤器配合使用正常，我想让它多选......以下是我的代码：-

$('#version_no').change(function () {
var version_no = $('#version_no').val();
if (version_no != null) {
showAll(version_no);
} else {
showAll();
}
});

showAll()是一个在筛选后返回数据的函数。 如果未选择过滤器，则显示所有内容。

以下是视图代码：-

<select multiple="multiple" style="margin-top:15px;" name="version_no" id="version_no">
<option value="">Select Version No</option>
<?php if (count($get_version_no)): ?>
<?php foreach ($get_version_no as $version): ?>
<option value=<?php echo $version->version_no; ?>><?php echo $version->version_no; ?></option>
<?php endforeach; ?>
<?php else: ?>
<?php endif; ?>

$get_version_no正在生成下拉值，如 1、1.1、1.2 等。

所以我想让它多选任何帮助将不胜感激。我正在使用代码点火器 3。

Answer 1

您需要在名称中为多个选择创建version_no数组

<select multiple="multiple" style="margin-top:15px;" name="version_no[]" id="version_no">

在 jquery 中

var version_no= [];
$.each($("#version_no option:selected"), function(){            
version_no.push($(this).val());
});
var version = version_no.join(", ");

version将是所有选定值用逗号分隔的字符串

Answer 2

你的 Javascript 代码只需要重构，以便version_no是一个数组而不是单个值。您可以使用"：selected"选择器来获取所选选项。 (见 https://api.jquery.com/selected-selector/( 您还需要重构showAll()函数，以便它解析数组而不是单个值。我还会让showAll()函数执行空检查而不是执行该if...then/else.