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

Question

我正在进行一项小型定制调查。索引视图由数据库中的问题列表填充，因此基本上我在视图上显示了数据库中的问题列表。问题列表现在每个问题都有一个下拉列表。挑战在于用每个问题的值填充一个空文本字段，并根据从每个问题中选择的项目值汇总各种值。

下面是索引动作的视图

@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 的示例，我猜它可能看起来 - 它不关心名称 - 我在您的选择中添加了一个 class：

$(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 中，您可以在选择 selector 之后使用 children() 和 parent() 以及 find() 方法。您可以将索引属性添加到每一行或使用类似这样的东西 ==> 在 select 值的 selector 之后 $(this).parent().find('td').children('input').val();

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

How to fill a text field with item selected from a dropdownlist with jQuery in ASP.NET MVC

c#

asp.net

jquery

asp.net-mvc-4

razor-2