如何解决Laravel 中的实时过滤器
我有一个如下所示的表格。 我有三个“白色”下拉列表来过滤设备注册标签下拉列表的值(具有设备注册标签标签的下拉输入字段的值只有在用户选择三个“白色”下拉列表的值后才会出现)。因此,设备注册标签值将根据“白色”下拉列表值而有所不同。
我希望它是一个实时过滤器,每次用户选择“白色”下拉值时,下拉选项都会立即更改。目前,我的方法是在“白色”下拉列表中使用 onchange=" this.form.submit()"
属性并在过滤器后返回值,但我意识到这种方法有一个缺点,即用户在更改值时可能会不小心提交表单“白色”下拉菜单。如何防止这种情况发生,只允许用户通过单击保存按钮来提交表单?
$this->Calibration_Location = $request->get('selected_location');
$this->Calibration_Category = $request->get('selected_category');
$this->categories = Equipment::select('Category')->distinct()->get()->toArray();
$this->locations = Equipment::select('Location')->distinct()->get()->toArray();
$matchThese = ['Category' => $this->Calibration_Category,'Location' => $this->Calibration_Location];
$this->Registration_Select_Tags = Equipment::select('Registration Tag')->distinct()->where($matchThese)->get();
我也试过 jQuery,但我只能通过指定的下拉字段触发,不能触发任何一个。
<script type="text/javascript">
$(document).ready(function() {
var location,category
$('#selected_transfer_location').change(function() {
location = $(this).val();
console.log(location);
$('#selected_transfer_category').change(function() {
category = $(this).val();
console.log(category);
});
// $('#transfer_registration_tag').find('option').not(':first').remove();
$.ajax({
url: 'Transaction/' + location + '/' + category,type: 'get',dataType: 'json',success: function(response) {
var len = 0;
if (response.data != null) {
len = response.data.length;
}
if (len > 0) {
for (var i = 0; i < len; i++) {
var id = response.data[i]['Registration Tag'];
var name = response.data[i]['Registration Tag'];
var option = "<option value='" + id + "'>" + name +
"</option>";
$("#transfer_registration_tag").append(option);
}
}
}
})
});
});
</script>
我希望我的问题很清楚,对 Laravel 来说还是个新手,我希望能从你那里得到一些提示。
解决方法
第一种方法可能是,您使用调用 ajax Query 来更改它们中的每一个并获取过滤的结果。像这样:
$('#dropdown1,#dropdown2,#dropdown3').change(function(){
var val1 = $('#dropdown1').val();
var val2 = $('#dropdown2').val();
var val3 = $('#dropdown3').val();
//And then your ajax call here to fetch filtered results.
});
唯一的问题是此 Ajax 调用将至少发生 3 次,每次调用一次。
第二种方法可能是您在这些下拉列表下方提供小按钮,例如 FetchTags。当用户选择所有 3 个值时,将单击该按钮并调用该 btn 的 ajax onClick。这样您的 Ajax 只会被调用一次。
,您可以使用 livewire 来做到这一点。很容易。
要安装它,您必须通过点击以下命令来使用 composer:
composer req livewire/livewire
请查看本教程以了解如何使用该框架完成您想做的事情。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。