代码之家 › 专栏 › 技术社区 › Guzzyman

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

razor-2 asp.net-mvc-4 asp.net jquery c#

0

Guzzyman · 技术社区 · 9 年前

下面是索引操作的视图

@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的权重值。

2 回复 | 直到 9 年前

1

3

mplungjan 9 年前

现在,您的代码似乎正在将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>

2

0

qusai safa 9 年前

如果我理解正确, 选择值的选择器后 $(this.parent().find('td').children('input').val();