如何在 Ajax 中使用下拉菜单自动填写表单？
Posted
技术标签:
【中文标题】如何在 Ajax 中使用下拉菜单自动填写表单？【英文标题】：How to Auto Fill Form using Dropdown in Ajax? 【发布时间】：2020-12-02 13:44:17 【问题描述】：我有一个 html 表单：
@using (Html.BeginForm("UpdateServiceClientInformation", "contracts", new id = Model.Id , FormMethod.Post, new role = "form" ))
<div class="row">
<div class="col-sm-6">
@if (Model.AvailableClients.Count > 0)
<div class="form-group">
@Html.LabelFor(m => m.AvailableClients)
@
Model.AvailableClients.Insert(0, new SelectListItem
Text = "None",
Value = "0"
);
@Html.DropDownListFor(m => m.AvailableClientId, Model.AvailableClients, new @class = "form-control" )
</div>
</div>
</div>
<div id="clientInformationInputsWrapper">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
@Html.LabelFor(m => m.ClientForm.FirstName)
@Html.TextBoxFor(m => m.ClientForm.FirstName, new @class = "form-control" )
@Html.ValidationMessageFor(m => m.ClientForm.FirstName, "", new @class = "text-danger" )
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
@Html.LabelFor(m => m.ClientForm.LastName)
@Html.TextBoxFor(m => m.ClientForm.LastName, new @class = "form-control" )
@Html.ValidationMessageFor(m => m.ClientForm.LastName, "", new @class = "text-danger" )
</div>
</div>
</div>
<input type="submit" class="btn btn-sm btn-primary pull-right" value="Save Changes" />
它包含可用客户端的下拉列表。现在我需要的是当我选择下拉列表时，表单必须自动填写。我正在使用 Ajax：
$("#AvailableClientId").on("change", function ()
var serviceCliendId = $(this).val();
if (serviceCliendId == "0")
$("#clientInformationInputsWrapper :input").val("");
else
$.ajax(
url: "/ServiceClient/Details/" + serviceCliendId,
type: "GET",
success: function (resp)
$("#ClientForm.FirstName").val(resp.FirstName);
$("#ClientForm.LastName").val(resp.LastName);
)
)
虽然使用这个 ajax 方法命中 API 但表单值没有改变。我该如何解决这个问题？
【问题讨论】：
【参考方案1】：首先通过放置一个console.log检查更改事件是否生效，然后从那里检查serviceCliendId和ajax响应。
$("#AvailableClientId").on("change", function ()
console.log('Change Event Fired')
var serviceCliendId = $(this).val();
console.log('serviceCliendId: ' + serviceCliendId)
if (serviceCliendId == "0")
$("#clientInformationInputsWrapper :input").val("");
else
$.ajax(
url: "/ServiceClient/Details/" + serviceCliendId,
type: "GET",
success: function (resp)
console.log('resp: ' + JSON.stringify(resp))
$("#ClientForm.FirstName").val(resp.FirstName);
$("#ClientForm.LastName").val(resp.LastName);
)
)
【讨论】：
以上是关于如何在 Ajax 中使用下拉菜单自动填写表单？的主要内容，如果未能解决你的问题，请参考以下文章
从子表单的组合框中选择下拉菜单后，MS Access 在主表单中填写 ID