根据文本框中的值自动填充下拉列表答案

【问题标题】：Auto Populate a Drop Down List based on value in Text Box根据文本框中的值自动填充下拉列表
【发布时间】：2023-03-18 15:27:01
【问题描述】：

我有一个简单的密码重置表单，它有一个用户名字段，下面是一个安全问题下拉列表。

我想要工作的是当用户输入一个有效的用户名时，当他们从文本框中移开焦点时，我想要它，以便下拉列表将填充我的数据库中找到的用户安全问题.

这是我的 HTML

    <div class="editor-field">
        @Html.TextBoxFor(model => model.userName, new { @Id = "forgotPassUserName" })
        @Html.ValidationMessageFor(model => model.userName)
    </div>

    <div class="editor-field">
    @{
        List<SelectListItem> securityquestionvalues = new List<SelectListItem>();
    }
        @Html.DropDownListFor(model => model.securityQuestion, securityquestionvalues, new { @Id = "forgotPassSecurityQuestions" })

这是我的 jQuery/JS

<script type="text/javascript">
$(function () {
    $("#forgotPassUserName").change(function () {
        var selectedValue = $(this).val();
        $.getJson("LoginRegisterController/ForgotPasswordDropDownList", { user: selectedValue }, function (result) {
            var selectList = $("#forgotPassSecurityQuestions");
            selectList.add(result, null);

        });
    });
});

下面是控制器中被上面的 getJSON 调用的方法：

        public ActionResult ForgotPasswordDropDownList(string userName)
    {
        var db = IoC.ResolveObjectContextelearningCommon();

        var rep = db.GetRepository<EmployeeReg>();

        List<EmployeeReg> user = rep.Find(o => o.Login == userName).ToList();

        List<SelectListItem> questionList = new List<SelectListItem>();

        if (user[0].secureQuestion1 != null)
        {
            questionList.Add(new SelectListItem { Text = user[0].secureQuestion1, Value = user[0].secureQuestion1 });
        }

        if (user[0].secureQuestion2 != null)
        {
            questionList.Add(new SelectListItem { Text = user[0].secureQuestion2, Value = user[0].secureQuestion2 });
        }

        return Json(questionList, JsonRequestBehavior.AllowGet);
    }

不幸的是。这对我不起作用。不幸的是，当我尝试在 getJSON 方法处设置断点时出现错误。问题似乎就在那里。

编辑

我将我的 getJSON 方法更改为 .ajax，就像这样

<script type="text/javascript">
$(function () {
    $("#forgotPassUserName").change(function () {
        var selectedValue = $(this).val();
        var url = '<%= Url.Action("ForgotPasswordDropDownList", "LoginRegisterController") %>';
        $.ajax({
            type: "GET",
            url: url,
            data: { userName: selectedValue },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {
                alert("testing");
            }
        });
    });
});

仍然没有弹出警报......

【问题讨论】：

您能描述一下您遇到的问题吗？谢谢！
当你运行这段代码时会发生什么？
很遗憾没有。下拉列表保持空白。在 getJSON 方法调试时出现错误，当我尝试在 getJSON 函数中放置警报以查看是否到达该代码时，没有任何反应。
我在控制器中的方法 (ForgotPasswordDropDownList) 确实为我生成了正确的值。我认为这是因为我通过 json 将 SelectListItems 列表传递回我遇到重大问题的 jquery...

标签： c# jquery asp.net-mvc json asp.net-mvc-3

【解决方案1】：

以下行不正确：

selectList.add(result, null);

您需要一个 for 循环来将它们添加到选择列表中，例如：

selectList.html(""); //empty the options first

for (var i = 0; i < result.length; i++)
{
    selectList.append("<option value='" + result[i].Value  + "'>" 
        + result[i].Text  + "</option>");
}

【讨论】：

有趣。但是，有一个问题。如果我替换： var selectList = $("#forgotPassSecurityQuestions"); selectList.add（结果，空）；带警报（“测试”）；那么我不应该在getJson的变化和成功上弹出一条消息。不幸的是，我什么也没得到
嗯，奇怪，你有没有调试过action方法的代码，以确保那里没有抛出错误？
我发布的第三个代码示例中的操作方法代码？是的，我有，如果我硬编码一个字符串值，它会返回正确的值。我认为我在使用 getJSON 将字符串值传递给该方法时遇到问题
但即便如此，如果我硬编码一个值并取出变量的传递，我仍然应该能够让我的警报窗口弹出，但它没有:(
那一定是success函数没有命中，把你的getJSON方法转换成.ajax方法，然后你可以提供error函数，这样我们就可以确定为什么AJAX请求是失败。这是.ajax 方法链接（仅供参考getJSON 是.ajax 的简写）：api.jquery.com/jQuery.ajax

【解决方案2】：

要在更改事件上触发事件，请使用模糊事件。

$("#forgotPassUserName").blur(

这将正确触发更改事件

【讨论】：