如何使用具有相同视图的 mvc5 将下拉列表中的选定值从 Dropdownlist 传递到文本框？

Question

我是 mvc.As 初学者，我正在尝试通过单击按钮将下拉列表值从 DropdownList 传递到同一视图中的文本框。我做了一些代码。但不起作用。我可以在播种列表中填充数据，但实际上提交更改事件不起作用。我怎样才能克服这个问题。这是我的形象 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();

    }

Answer 1

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

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

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

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

如何使用具有相同视图的 mvc5 将下拉列表中的选定值从 Dropdownlist 传递到文本框？

how to pass dropdown selected value from Dropdownlist to a textbox using mvc5 with same view?

jquery

text

razor

asp.net-mvc-5

dropdown