Question

我是mvc的新手。作为一个初学者，我试图通过单击按钮将DropdownList的dropdown值传递到同一视图内的文本框。我写一些代码。但没有用我可以将数据填充到播种列表中，但实际上无法提交更改事件。我该如何克服这个问题。这是我的形象 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事件以实现您的目标，并使用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包含说明所需行为的有效示例。

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

1 个答案: