1
我有一個包含4個下拉列表的搜索表單。每次用戶更改這些值時，表單提交和新結果都將在局部視圖中顯示。這裏是代碼：Ajax表單在第一次提交事件後沒有提交，也沒有重新渲染部分視圖
<script type="text/javascript">
$(document).ready(function() {
$("#DDLUF").change(function (event) {
$("#loading").show();
$("#DDLCidade").empty();
$("#DDLBairro").empty();
$("#DDLRua").empty();
if ($("#DDLUF").val() !== '') {
$.ajax({
type: 'POST',
url: '/CoberturaPainelRotas/ObterCidadesPorUf',
dataType: 'json',
data: { uf: $("#DDLUF").val() },
success: function (Ddd) {
$("#DDLCidade").append("<option value''>SELECIONE</option>");
$.each(Ddd, function (i, Cidade) {
$("#DDLCidade").append('<option value="' + Cidade.Id + '">' + Cidade.Nome + '</option>');
});
var form = $(event.target).parents('form');
form.submit();
$("#DDLCidade").prop('disabled', false);
$('#loading').hide();
}
});
} else {
$('#loading').hide();
$("#DDLCidade").prop('disabled', true);
$("#DDLBairro").prop('disabled', true);
$("#DDLRua").prop('disabled', true);
$("#totalUf").text("");
$("#totalCidade").text("");
}
});
$("#DDLCidade").change(function() {
$("#loading").show();
$("#DDLBairro").empty();
$("#DDLRua").empty();
if ($("#DDLCidade").val() !== 'SELECIONE') {
$.ajax({
type: 'POST',
url: '/CoberturaPainelRotas/ObterBairrosPorCidade',
dataType: 'json',
data: { cidade: $("#DDLCidade").val() },
success: function (Ddd) {
$("#DDLBairro").append("<option value''>SELECIONE</option>");
$.each(Ddd, function (i, Bairro) {
$("#DDLBairro").append('<option value="' + Bairro.Id + '">' + Bairro.Nome + '</option>');
});
var form = $(event.target).parents('form');
form.submit();
$("#DDLBairro").prop('disabled', false);
$('#loading').hide();
}
});
} else {
$('#loading').hide();
$("#DDLBairro").prop('disabled', true);
$("#DDLRua").prop('disabled', true);
$("#totalCidade").text("");
}
});
$("#DDLBairro").change(function() {
$("#loading").show();
$("#DDLRua").empty();
if ($("#DDLRua").val() !== 'SELECIONE') {
$.ajax({
type: 'POST',
url: '/CoberturaPainelRotas/ObterRuasPorBairro',
dataType: 'json',
data: { bairro: $("#DDLBairro").val() },
success: function (Ddd) {
$("#DDLRua").append("<option value''>SELECIONE</option>");
$.each(Ddd, function (i, Rua) {
$("#DDLRua").append('<option value="">' + Rua.NomeRua + '</option>');
});
var form = $(event.target).parents('form');
form.submit();
$("#DDLRua").prop('disabled', false);
$('#loading').hide();
}
});
} else {
$('#loading').hide();
$("#DDLRua").prop('disabled', true);
}
});
});
</script>
<div class="panel-body">
<div class="row">
<div class="col-lg 12">
<h3 class="page-header">Consultar Cobertura</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
@using (Ajax.BeginForm("ConsultarCapacidadeSecundaria", "CoberturaPainelRotas", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "PartialConsultarCobertura" }, new { @id = "formID" }))
{
<div class="row">
<div class="col-sm-2">
<label>Uf:</label>
@Html.DropDownListFor(x => x.UF , new SelectList((IEnumerable)ViewData["UF"]), "SELECIONE", new { @id = "DDLUF", @class = "form-control" })
</div>
<div class="col-sm-4">
<label id="totalUf"></label>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<label>Cidade:</label>
@Html.DropDownListFor(x => x.Cidade, new SelectList(string.Empty), new { @id = "DDLCidade", @class = "form-control", @disabled = "true" })
</div>
<div class="col-sm-4">
<label id="totalCidade"></label>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<label>Bairro:</label>
@Html.DropDownListFor(x => x.Bairro, new SelectList(string.Empty), new { @id = "DDLBairro", @class = "form-control", @disabled = "true" })
</div>
</div>
<div class="row">
<div class="col-sm-4">
<label>Rua:</label>
@Html.DropDownListFor(x => x.Rua, new SelectList(string.Empty), new { @id = "DDLRua", @class = "form-control", @disabled = "true" })
</div>
</div>
}
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div id="PartialConsultarCobertura">
@{
Html.RenderPartial("PartialConsultaCobertura");
}
</div>
</div>
</div>
</div>
當用戶更改第一個下拉列表時，ajax表單提交併顯示結果。但是，當用戶更改以下下拉列表中的選定項目時，表單不會提交。難道是我需要每次重新附加jquery事件？我究竟做錯了什麼？
（ASP.MVC 5 BTW）
它看起來像你清除選擇並添加選項還給他們，所以你不應該失去你的綁定。我在第二個邏輯塊中發現了一個錯誤，那就是增加了一個帶有「value」的選項，但到目前爲止我還沒有發現任何其他的東西。 – Taplar
我已經使用chrome調試了jquery代碼，並且成功事件確實觸發了。但是，當涉及到「form.submit」時，它不會。 –
你的標記看起來沒有任何形式標記。這是否準確？ – Taplar