如何使用ASP.NET中的jQuery從下拉列表中選擇項目來填充文本字段MVC

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領域的字段的值 - 他們看起來是一樣的領域 -

但爲什麼要複製？爲什麼不總結選擇而沒有空場？

反正這裏是一個使用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。 （）;