如何使用具有相同视图的 mvc5 将下拉列表中的下拉选择值传递给文本框？答案

【问题标题】：how to pass dropdown selected value from Dropdownlist to a textbox using mvc5 with same view?如何使用具有相同视图的 mvc5 将下拉列表中的下拉选择值传递给文本框？
【发布时间】：2019-05-17 11:40:20
【问题描述】：

我是 mvc 的新手。作为初学者，我试图通过单击按钮将下拉列表中的下拉值传递到同一视图中的文本框。我做了一些代码。但不工作。我可以在 drop sown 列表上填充数据，但实际上提交更改事件不起作用。我该如何克服这个问题。这是我的图像 Dropdownlist to textbox

我的 Dropdown.cshtml 查看代码在这里-

@model LoginForm.Models.UserModel

@{
                ViewBag.Title = "Dropdown";
}

<h2>Dropdown List</h2>

<div class="form-horizontal">

</div>

@using (Html.BeginForm("Dropdown", "Home", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()


    <div class="form-group" style="padding-top:50px">
        @Html.LabelFor(model => model.UserName, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @(Html.DropDownList("DropdowenList", new SelectList(ViewBag.AllNameList, "CustomerId",
                                                                                "UserName", 0), "Select ...", new { @class = "form-control" }))

        </div>
    </div>


    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Submit" class="btn btn-default" />
            <br />
            <br />
            @Html.TextBox("txtName")

        </div>
    </div>

}

    <script type="text/javascript">
        $(function () {
            $('#DropdowenList').change(function () {
                var selectedValue = $(this).val();
                $('#txtName').val(selectedValue);
            });
        });
    </script>

我的 HomeCoontroller.Cs 代码在这里-

 [AllowAnonymous]
    public ActionResult Dropdown(string returnUrl)
    {
        ViewBag.Flag = true;
        DropdowncCass dp = new DropdowncCass();
        var allName = dp.GetUserInfo();
        ViewBag.AllNameList = allName;
        Session["allName"] = allName;
        ViewBag.ReturnUrl = returnUrl;
        return View();

    }

【问题讨论】：

JS 代码看起来不错，在change 事件期间实际上什么不起作用？你已经检查过控制台了吗？
是的，它实际上不适用于更改事件。 @TetsuyaYamamoto
您是想处理下拉列表中的change 事件，还是通过按钮click 事件传递值？如果您选择第二个，请尝试$('.btn').click(function () { e.preventDefault(); var selectedValue = $('#DropdowenList').val(); $('#txtName').val(selectedValue); });。检查您是否在控制台中也遇到任何错误。
是的。你是对的。我想通过按钮单击传递值。我使用你的代码但不工作。我认为问题出在提交按钮上。我在提交按钮点击事件上遗漏了什么吗？ @TetsuyaYamamoto
哦，我认为您需要使用$('.btn').click(function (e) { e.preventDefault(); // other stuff }); 来防止默认提交按钮行为。我只是忘了包含事件处理程序参数。

标签： jquery razor text asp.net-mvc-5 dropdown

【解决方案1】：

您可以处理提交按钮的click 事件以实现您的目标，并使用option:selected 选择器和text() 函数从下拉列表的选定项目文本中设置文本框值：

$(function () {
     $('.btn').click(function (e) {
         e.preventDefault();
         var selectedValue = $("#DropdowenList option:selected").text();
         $('#txtName').val(selectedValue);
     });
});

e.preventDefault() 在这里是必需的，因为您使用的是 BeginForm 帮助器，它呈现 <form> 标记和用于防止默认按钮提交行为将表单回发到控制器操作的功能。

This fiddle 包含说明所需行为的工作示例。

【讨论】：