如何在ASP.NET MVC中使用jQuery从下拉列表中选择的项目填充文本字段

Question

我正在做一个小型的定制调查。 索引视图中填充了数据库中的questionList，因此基本上我在视图上显示了来自数据库的问题列表。 现在，问题列表为每个问题提供了一个下拉列表。 面临的挑战是如何用每个问题的值填充一个空文本字段，并根据从每个问题中选择的项目值汇总各种值。

下面是索引动作的视图

@model IEnumerable<WorkPlaceBullying.Models.Question>
@{
    ViewBag.Title = "Survey Questions";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Questions</h2>
@if (!Model.Any())
{
    <p>We don't have any Questions yet!.</p>
}

@Html.ActionLink("Question", "New", "Question", "", new { @class = "btn btn-primary" })

@using (@Html.BeginForm("Index", "Question", FormMethod.Get))
{
    @Html.AntiForgeryToken()
    <div class="">
        <table class="table table-striped table-hover ">
            <thead>
                <tr>
                    <td>ID</td>
                    <td>Questions</td>
                    <td>Category</td>
                </tr>
            </thead>
            @foreach (var question in Model)
            {
                <tr>
                    <td>@question.Id</td>
                    <td>
                        @*@Html.ActionLink(@question.SurveyQuestion, "Edit", "Question", new { id = @question.Id }, null)*@
                        @question.SurveyQuestion
                    </td>
                    <td>
                        @question.QuestionCategory.QuestionCat
                    </td>
                    @if (@question.QResponseCategory.Id == 1)
                    {
                        <td>
                            @*@Html.Hidden("Weight", @question.ResponseCategoryId)*@
                            @Html.DropDownList("Weight", (IEnumerable<SelectListItem>)ViewBag.ResponseId, "Select Response", new { @class = "form-control" })
                        </td>
                        <td>
                            <input type="text" id="Weight" name="__Weight" class="form-control col-sm-2" value="">
                        </td>
                    }
                </tr>
            }
        </table>
    </div>
}
@section Scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            $("#Weight").change(function (evt) {
                $('input[name=__Weight]').val($("#Weight").val());
            });
        });
    </script>
}

我成功地将选定项的值输入到文本字段中，但是它填充在所有字段中。 如何使每个文本字段唯一并具有自己的选定值？

下面是图形视图

从上图中...在问题1中选择的项目的权重为2。当为其他问题选择了项目时...它没有反映在文本框中，而是...它反映了权重的值对于所有文本框上的问题1。

Answer 1

您需要唯一的ID

现在看来，您的代码正在将ID =“ Weight”的字段的值复制到名为__Weight的字段-它们看起来是相同的字段-

但是为什么要复制？ 为什么不对所选内容求和而没有空字段呢？

无论如何，这是一个使用HTML的示例，我想它看起来像-不在乎名称-我改为在您的选择中添加了一个类：

 $(function() { $(".weightSel").on("change",function (evt) { $(this).closest("td").next().find("input").val(this.value); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <table> <tr> <td>Id</td> <td> SurveyQuestion </td> <td> QuestionCat </td> <td> <select class="weightSel"> <option value="">Please select</option> <option value="1">One</option> <option value="2">Two</option> </select> </td> <td> <input type="text" name="__Weight" class="form-control col-sm-2" value=""> </td> </tr> <tr> <td>Id</td> <td> SurveyQuestion </td> <td> QuestionCat </td> <td> <select class="weightSel"> <option value="">Please select</option> <option value="1">One</option> <option value="2">Two</option> </select> </td> <td> <input type="text" name="__Weight" class="form-control col-sm-2" value=""> </td> </tr> <tr> <td>Id</td> <td> SurveyQuestion </td> <td> QuestionCat </td> <td> <select class="weightSel"> <option value="">Please select</option> <option value="1">One</option> <option value="2">Two</option> </select> </td> <td> <input type="text" name="__Weight" class="form-control col-sm-2" value=""> </td> </tr> </table> 

Answer 2

如果我理解正确，在Jquery中，可以在选择选择器之后使用children（）和parent（）以及find（）方法。 您可以在选择值$（this）.parent（）。find（'td'）。children（'input'）。val（）的选择器之后，将索引属性添加到每一行或使用类似==>的方法;