ASP.NET MVCでjQueryを使用してドロップダウンリストから選択した項目でテキストフィールドを入力する方法

Question

私は小さなカスタムサーベイを行っています。インデックスビューにはデータベースからのquestionListが設定されているため、基本的にはビューに表示されるデータベースからの質問のリストがあります。質問リストに各質問のドロップダウンリストが表示されるようになりました。課題は空のテキストフィールドに各質問の値を入力し、各質問から選択された項目値に基づいてさまざまな値を合計することです。

以下は、私がテキストフィールドに、選択した項目の値を得ることに成功したindexアクション

@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

を必要とする今、あなたのコードが__Weightという名前のフィールドにID =「重量」とフィールドの値をコピーしているようだ - 彼らは同じフィールドであることを見て -

しかし、なぜコピー？選択肢を合計して空のフィールドを持たないのはなぜですか？名前を気にしない - - とにかくここ

は、私はそれが見えるかもしれない推測として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'）の子（ 'input'）のセレクタを選択した後に、このようなものを使用するか、==> のようなものを使用してインデックス属性を追加できます。 （）;