JQuery - 下拉选择的选项值未传递给 ajax 查询参数（Metronic 模板）
JQuery - Dropdown selected option value is not passed to ajax query parameter (Metronic Template)
我试图将下拉选择的选项传递给 AJAX 查询参数，我在有效负载中得到 null。
如果我 console.log() 选择的选项，我可以获得正确的值，但我似乎无法将它传递给 AJAX 查询参数选项。
我的代码中可以穿什么？
这是这些下拉菜单的 HTML 代码部分：
<label class="col-form-label">{{ __('general.labels.marketcenter') }}</label>
<div class="col-xl-2 col-sm-2">
<select class="form-control" id="kt_market_center_dropdown">
<option value=""></option>
@foreach($market_center_dropdown as $market_center)
<option value="{{ $market_center->id }}">{{ $market_center->mc_name }}</option>
@endforeach
</select>
</div>
<label class="col-form-label">{{ __('general.labels.megaagent') }}</label>
<div class="col-xl-2 col-sm-2">
<select class="form-control" id="kt_mega_agent_dropdown">
<option value=""></option>
@foreach($mega_agent_dropdown as $mega_agent)
<option value="{{ $mega_agent->id }}">{{ $mega_agent->megaagent_name }}</option>
@endforeach
</select>
</div>
<label class="col-form-label">{{ __('general.labels.teams') }}</label>
<div class="col-xl-2 col-sm-2">
<select class="form-control" id="kt_team_dropdown">
<option value=""></option>
@foreach($teams_dropdown as $teams)
<option value="{{ $teams->id }}">{{ $teams->team_name }}</option>
@endforeach
</select>
</div>
这是我的 javascript 代码（console.log($("#kt_market_center_dropdown option:selected").val()); 代码从下拉列表中获取正确的值并且与 ajax 查询参数中的代码相同）
"use strict";
var KTDatatableChildRemoteDataDemo = {
init: function () {
var t;
t = $(".kt-datatable").KTDatatable({
data: {
type: "remote",
source: {
read: {
url: "/dashboard/exclusive",
method: 'GET',
dataType: "json",
contentType: "application/json",
params: {
query: {
market_center: $("#kt_market_center_dropdown option:selected").val(),
mega_agent: $("#kt_mega_agent_dropdown option:selected").val(),
team: $("#kt_team_dropdown option:selected").val()
}
}
}
},
pageSize: 10,
serverPaging: !0,
serverFiltering: !1,
serverSorting: !0
},
layout: {
scroll: !0,
height: 1000,
footer: !1
},
sortable: false,
toolbar: {
items: {
info: false,
}
},
pagination: !0,
detail: {
title: "Cargando tabla",
content: function (t) {
$("<div/>").attr("id", "child_data_ajax_" + t.data.id).appendTo(t.detailCell).KTDatatable({
data: {
type: "remote",
source: {
read: {
url: "/dashboard/exclusive/details",
method: 'GET',
dataType: "json",
contentType: "application/json",
params: {
query: {
id: t.data.id,
exclusive: $('#kt_form_exclusive').prop("checked") ? "Exclusiva" : "",
open: $('#kt_form_open').prop("checked") ? "No Exclusiva" : "",
sale: $('#kt_form_sale').prop("checked") ? "Venta" : "",
rent: $('#kt_form_rent').prop("checked") ? "Alquiler" : ""
}
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
layout: {
scroll: !0,
height: 800,
footer: false,
spinner: {
type: 1,
theme: "default"
}
},
sortable: false,
toolbar: {
items: {
info: false,
}
},
translate: {
records: {
noRecords: 'No se encontraron registros',
processing: 'Por favor espere...'
},
toolbar: {
pagination: {
items: {
default: {
first: 'Primero',
prev: 'Anterior',
next: 'Siguiente',
last: 'Ultimo',
more: 'Más',
input: 'Nro. Página',
select: 'Seleccione cantidad',
all: 'todos',
},
info: 'Mostrando {{start}} - {{end}} of {{total}}',
},
},
}
},
rows: {
beforeTemplate: function(row, data, index) {
if (data.prop_type == 'TOTAL CANTIDAD' || data.prop_type == 'TOTAL VOLUMEN') {
$(row).css('background-color', '#F7F8FA');
}
},
},
columns: [ {
field: "prop_type",
title: "Tipo",
width: 110
}, {
field: "ENE",
title: "ENE",
width: 70,
textAlign: "center",
type: "number"
}, {
field: "FEB",
title: "FEB",
width: 70,
textAlign: "center",
type: "number"
}, {
field: "MAR",
title: "MAR",
width: 70,
textAlign: "center",
type: "number"
},{
field: "ABR",
title: "ABR",
width: 70,
textAlign: "center",
type: "number"
},{
field: "MAY",
title: "MAY",
width: 70,
textAlign: "center",
type: "number"
},{
field: "JUN",
title: "JUN",
width: 70,
textAlign: "center",
type: "number"
},{
field: "JUL",
title: "JUL",
width: 70,
textAlign: "center",
type: "number"
},{
field: "AGO",
title: "AGO",
width: 70,
textAlign: "center",
type: "number"
},{
field: "SEP",
title: "SEP",
width: 70,
textAlign: "center",
type: "number"
},{
field: "OCT",
title: "OCT",
width: 70,
textAlign: "center",
type: "number"
},{
field: "NOV",
title: "NOV",
width: 70,
textAlign: "center",
type: "number"
},{
field: "DIC",
title: "DIC",
width: 70,
textAlign: "center",
type: "number"
},{
field: "TOTAL",
title: "TOTAL",
width: 80,
textAlign: "center",
type: "number"
}
]
})
}
},
search: {
input: $("#generalSearch")
},
columns: [{
field: "id",
title: "",
sortable: !1,
width: 30,
textAlign: "center"
},{
field: "name",
title: "Asociado",
width: 200,
autoHide: false,
sortable: false,
// callback function support for column rendering
template: function (data) {
var output = '';
if(data.avatar) {
output = '' +
'<div class="kt-user-card-v2">' +
'<div class="kt-user-card-v2__pic">' +
'<img src="' + data.avatar + '" alt="photo">' +
'</div>' +
'<div class="kt-user-card-v2__details">' +
'<a href="#" class="kt-user-card-v2__name">' + data.name + '</a>' +
'<span class="kt-user-card-v2__desc">' + data.role + '</span>' +
'<span class="kt-user-card-v2__desc"></span>' +
'</div>' +
'</div>';
} else {
output = '' +
'<div class="kt-user-card-v2">' +
'<div class="kt-user-card-v2__pic">' +
'<div class="kt-badge kt-badge--xl kt-badge--primary">KW</div>' +
'</div>' +
'<div class="kt-user-card-v2__details">' +
'<a href="#" class="kt-user-card-v2__name">' + data.name + '</a>' +
'<span class="kt-user-card-v2__desc">' + data.role + '</span>' +
'<span class="kt-user-card-v2__desc"></span>' +
'</div>' +
'</div>';
}
return output;
}
}, {
field: "mc_name",
title: "Market Center",
sortable: false,
}, {
field: "megaagent_name",
title: "Mega Agente",
sortable: false,
},{
field: "kw_start_date",
title: "Ingreso KW",
sortable: false,
}, {
field: "kw_en_date",
title: "Salida KW",
sortable: false,
},{
field: "status",
title: "Estado",
sortable: false,
template: function (t) {
var e = {
Activo: {
title: "Activo",
class: " kt-badge--success"
},
Inactivo: {
title: "Inactivo",
class: " kt-badge--danger"
}
};
return '<span class="kt-badge ' + e[t.status].class + ' kt-badge--inline kt-badge--pill">' + e[t.status].title + "</span>"
}
}
]
}),
$("#kt_market_center_dropdown").on("change", function () {
$(".kt-datatable").KTDatatable("reload");
console.log($("#kt_market_center_dropdown option:selected").val());
}),
$("#kt_mega_agent_dropdown").on("change", function () {
$(".kt-datatable").KTDatatable("reload");
}),
$("#kt_team_dropdown").on("change", function () {
$(".kt-datatable").KTDatatable("reload");
}),
$("#kt_form_exclusive").on("change", function () {
$(".kt-datatable").KTDatatable("reload");
}),
$("#kt_form_open").on("change", function () {
$(".kt-datatable").KTDatatable("reload");
}),
$("#kt_form_sale").on("change", function () {
$(".kt-datatable").KTDatatable("reload");
}),
$("#kt_form_rent").on("change", function () {
$(".kt-datatable").KTDatatable("reload");
})
}
};
jQuery(document).ready(function () {
KTDatatableChildRemoteDataDemo.init()
});
因为它是一个 GET 请求你可以改变
params: { query: {...} }
仅：
data: {...}
除非你设置 processData = false.
我试图将下拉选择的选项传递给 AJAX 查询参数，我在有效负载中得到 null。
如果我 console.log() 选择的选项，我可以获得正确的值，但我似乎无法将它传递给 AJAX 查询参数选项。
我的代码中可以穿什么？
这是这些下拉菜单的 HTML 代码部分：
<label class="col-form-label">{{ __('general.labels.marketcenter') }}</label>
<div class="col-xl-2 col-sm-2">
<select class="form-control" id="kt_market_center_dropdown">
<option value=""></option>
@foreach($market_center_dropdown as $market_center)
<option value="{{ $market_center->id }}">{{ $market_center->mc_name }}</option>
@endforeach
</select>
</div>
<label class="col-form-label">{{ __('general.labels.megaagent') }}</label>
<div class="col-xl-2 col-sm-2">
<select class="form-control" id="kt_mega_agent_dropdown">
<option value=""></option>
@foreach($mega_agent_dropdown as $mega_agent)
<option value="{{ $mega_agent->id }}">{{ $mega_agent->megaagent_name }}</option>
@endforeach
</select>
</div>
<label class="col-form-label">{{ __('general.labels.teams') }}</label>
<div class="col-xl-2 col-sm-2">
<select class="form-control" id="kt_team_dropdown">
<option value=""></option>
@foreach($teams_dropdown as $teams)
<option value="{{ $teams->id }}">{{ $teams->team_name }}</option>
@endforeach
</select>
</div>
这是我的 javascript 代码（console.log($("#kt_market_center_dropdown option:selected").val()); 代码从下拉列表中获取正确的值并且与 ajax 查询参数中的代码相同）
"use strict";
var KTDatatableChildRemoteDataDemo = {
init: function () {
var t;
t = $(".kt-datatable").KTDatatable({
data: {
type: "remote",
source: {
read: {
url: "/dashboard/exclusive",
method: 'GET',
dataType: "json",
contentType: "application/json",
params: {
query: {
market_center: $("#kt_market_center_dropdown option:selected").val(),
mega_agent: $("#kt_mega_agent_dropdown option:selected").val(),
team: $("#kt_team_dropdown option:selected").val()
}
}
}
},
pageSize: 10,
serverPaging: !0,
serverFiltering: !1,
serverSorting: !0
},
layout: {
scroll: !0,
height: 1000,
footer: !1
},
sortable: false,
toolbar: {
items: {
info: false,
}
},
pagination: !0,
detail: {
title: "Cargando tabla",
content: function (t) {
$("<div/>").attr("id", "child_data_ajax_" + t.data.id).appendTo(t.detailCell).KTDatatable({
data: {
type: "remote",
source: {
read: {
url: "/dashboard/exclusive/details",
method: 'GET',
dataType: "json",
contentType: "application/json",
params: {
query: {
id: t.data.id,
exclusive: $('#kt_form_exclusive').prop("checked") ? "Exclusiva" : "",
open: $('#kt_form_open').prop("checked") ? "No Exclusiva" : "",
sale: $('#kt_form_sale').prop("checked") ? "Venta" : "",
rent: $('#kt_form_rent').prop("checked") ? "Alquiler" : ""
}
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
layout: {
scroll: !0,
height: 800,
footer: false,
spinner: {
type: 1,
theme: "default"
}
},
sortable: false,
toolbar: {
items: {
info: false,
}
},
translate: {
records: {
noRecords: 'No se encontraron registros',
processing: 'Por favor espere...'
},
toolbar: {
pagination: {
items: {
default: {
first: 'Primero',
prev: 'Anterior',
next: 'Siguiente',
last: 'Ultimo',
more: 'Más',
input: 'Nro. Página',
select: 'Seleccione cantidad',
all: 'todos',
},
info: 'Mostrando {{start}} - {{end}} of {{total}}',
},
},
}
},
rows: {
beforeTemplate: function(row, data, index) {
if (data.prop_type == 'TOTAL CANTIDAD' || data.prop_type == 'TOTAL VOLUMEN') {
$(row).css('background-color', '#F7F8FA');
}
},
},
columns: [ {
field: "prop_type",
title: "Tipo",
width: 110
}, {
field: "ENE",
title: "ENE",
width: 70,
textAlign: "center",
type: "number"
}, {
field: "FEB",
title: "FEB",
width: 70,
textAlign: "center",
type: "number"
}, {
field: "MAR",
title: "MAR",
width: 70,
textAlign: "center",
type: "number"
},{
field: "ABR",
title: "ABR",
width: 70,
textAlign: "center",
type: "number"
},{
field: "MAY",
title: "MAY",
width: 70,
textAlign: "center",
type: "number"
},{
field: "JUN",
title: "JUN",
width: 70,
textAlign: "center",
type: "number"
},{
field: "JUL",
title: "JUL",
width: 70,
textAlign: "center",
type: "number"
},{
field: "AGO",
title: "AGO",
width: 70,
textAlign: "center",
type: "number"
},{
field: "SEP",
title: "SEP",
width: 70,
textAlign: "center",
type: "number"
},{
field: "OCT",
title: "OCT",
width: 70,
textAlign: "center",
type: "number"
},{
field: "NOV",
title: "NOV",
width: 70,
textAlign: "center",
type: "number"
},{
field: "DIC",
title: "DIC",
width: 70,
textAlign: "center",
type: "number"
},{
field: "TOTAL",
title: "TOTAL",
width: 80,
textAlign: "center",
type: "number"
}
]
})
}
},
search: {
input: $("#generalSearch")
},
columns: [{
field: "id",
title: "",
sortable: !1,
width: 30,
textAlign: "center"
},{
field: "name",
title: "Asociado",
width: 200,
autoHide: false,
sortable: false,
// callback function support for column rendering
template: function (data) {
var output = '';
if(data.avatar) {
output = '' +
'<div class="kt-user-card-v2">' +
'<div class="kt-user-card-v2__pic">' +
'<img src="' + data.avatar + '" alt="photo">' +
'</div>' +
'<div class="kt-user-card-v2__details">' +
'<a href="#" class="kt-user-card-v2__name">' + data.name + '</a>' +
'<span class="kt-user-card-v2__desc">' + data.role + '</span>' +
'<span class="kt-user-card-v2__desc"></span>' +
'</div>' +
'</div>';
} else {
output = '' +
'<div class="kt-user-card-v2">' +
'<div class="kt-user-card-v2__pic">' +
'<div class="kt-badge kt-badge--xl kt-badge--primary">KW</div>' +
'</div>' +
'<div class="kt-user-card-v2__details">' +
'<a href="#" class="kt-user-card-v2__name">' + data.name + '</a>' +
'<span class="kt-user-card-v2__desc">' + data.role + '</span>' +
'<span class="kt-user-card-v2__desc"></span>' +
'</div>' +
'</div>';
}
return output;
}
}, {
field: "mc_name",
title: "Market Center",
sortable: false,
}, {
field: "megaagent_name",
title: "Mega Agente",
sortable: false,
},{
field: "kw_start_date",
title: "Ingreso KW",
sortable: false,
}, {
field: "kw_en_date",
title: "Salida KW",
sortable: false,
},{
field: "status",
title: "Estado",
sortable: false,
template: function (t) {
var e = {
Activo: {
title: "Activo",
class: " kt-badge--success"
},
Inactivo: {
title: "Inactivo",
class: " kt-badge--danger"
}
};
return '<span class="kt-badge ' + e[t.status].class + ' kt-badge--inline kt-badge--pill">' + e[t.status].title + "</span>"
}
}
]
}),
$("#kt_market_center_dropdown").on("change", function () {
$(".kt-datatable").KTDatatable("reload");
console.log($("#kt_market_center_dropdown option:selected").val());
}),
$("#kt_mega_agent_dropdown").on("change", function () {
$(".kt-datatable").KTDatatable("reload");
}),
$("#kt_team_dropdown").on("change", function () {
$(".kt-datatable").KTDatatable("reload");
}),
$("#kt_form_exclusive").on("change", function () {
$(".kt-datatable").KTDatatable("reload");
}),
$("#kt_form_open").on("change", function () {
$(".kt-datatable").KTDatatable("reload");
}),
$("#kt_form_sale").on("change", function () {
$(".kt-datatable").KTDatatable("reload");
}),
$("#kt_form_rent").on("change", function () {
$(".kt-datatable").KTDatatable("reload");
})
}
};
jQuery(document).ready(function () {
KTDatatableChildRemoteDataDemo.init()
});
因为它是一个 GET 请求你可以改变
params: { query: {...} }
仅：
data: {...}
除非你设置 processData = false.