asp.net dropdownlist gridview内のテキストボックスに選択値の表示

Question

グリッドビュー内に3つのドロップダウンリストがあり、グリッドビュー内には他のコントロールとともにテキストボックスがあります。私は各ドロップダウンリストから値を選択し、それらの値を追加し、その結果に応じてグリッドビュー内のテキストボックスに結果を表示したい。これは、グリッドビューの各行に対して実行する必要があります。 各行のドロップダウンリストから選択した値を取得できましたが、グリッドビューの各行のテキストボックスに表示することはできません。 これはすべてjqueryを使って行う必要があります。助けてください。過去3日間、それを踏み入れてください。

  <asp:TemplateField HeaderText ="Frequency"> 
       <ItemTemplate> 
        <asp:DropDownList ID="ddlFrequency" runat="server" CssClass="col-sm-3 it1"> 
         <asp:ListItem Value="0">Select</asp:ListItem> 
         <asp:ListItem Value="1">1.The lowest score for activity being done a minimal amount up to an hour a day.</asp:ListItem> 
         <asp:ListItem Value="2">2.The activity is done more than an hour up to a quarter of their time at work or about 2 hours a day</asp:ListItem> 
         <asp:ListItem Value="3">3.The activity is done for at least half of the time in a day.</asp:ListItem> 
         <asp:ListItem Value="4">4.The activity is done more than half of the day</asp:ListItem> 
         <asp:ListItem Value="5">5.The activity is done three quarters of the day</asp:ListItem> 
         <asp:ListItem Value="6">6.The highest score for the person performing the task all day alone</asp:ListItem> 
        </asp:DropDownList> 
       </ItemTemplate> 
      </asp:TemplateField> 
      <asp:TemplateField HeaderText ="Probability"> 
       <ItemTemplate> 
        <asp:DropDownList ID="ddlProbability" runat="server" CssClass="col-sm-4 it2"> 
         <asp:ListItem Value="0">Select</asp:ListItem> 
         <asp:ListItem Value="1">1.The lowest score for any low probability of injury</asp:ListItem> 
         <asp:ListItem Value="2">2.There is a remote chance of injury</asp:ListItem> 
         <asp:ListItem Value="3">3.There is an occasional chance of injury</asp:ListItem> 
         <asp:ListItem Value="4">4.There is a probable chance of injury</asp:ListItem> 
         <asp:ListItem Value="5">5.There is a likely chance of injury.</asp:ListItem> 
         <asp:ListItem Value="6">6.The highest score for any high probability of injury occurring.</asp:ListItem> 
        </asp:DropDownList> 
       </ItemTemplate> 
      </asp:TemplateField> 
      <asp:TemplateField HeaderText ="Severity"> 
       <ItemTemplate> 
        <asp:DropDownList ID="dllSeverity" runat="server" CssClass="col-sm-3 it3" OnSelectedIndexChanged="dllSeverity_SelectedIndexChanged" AutoPostBack="True"> 
         <asp:ListItem Value="0">Select</asp:ListItem> 
         <asp:ListItem Value="1">1.The lowest score for any minor injuries such as minor cuts, scrapes requiring first-aid.</asp:ListItem> 
         <asp:ListItem Value="2">2.Multiple first Aid, with possible health care visit with no lost time.</asp:ListItem> 
         <asp:ListItem Value="3">3.Potential for medical aid cases and/or resulting in few days of lost time injuries.</asp:ListItem> 
         <asp:ListItem Value="4">4.Long term lost time injury</asp:ListItem> 
         <asp:ListItem Value="5">5.The highest score for any major injuries such as fatalities/critical injuries</asp:ListItem> 
        </asp:DropDownList> 
       </ItemTemplate> 
      </asp:TemplateField> 
      <asp:TemplateField HeaderText="Hazard Rating"> 
       <ItemTemplate> 
        <asp:TextBox ID="tbHazRat" runat="server" CssClass="col-sm-1 form-control it4"></asp:TextBox> 
       </ItemTemplate> 
      </asp:TemplateField> 

     </Columns> 
     </asp:GridView> 

jqueryの：

<script> 
     $(document).ready(function() { 
      var a, b, c; 

      $('.it1').change(function() { 
       var row = $(this); 
       a = $(this).find('option:selected').val(); 

       var d = $('#<%=gvCHA.ClientID%>').find('input:text[id*="tbHazRat"]'); 
       d.val(a); 
      }); 

      $('.it2').change(function() { 
       var row = $(this); 
       b = row.find('option:selected').val(); 
       alert(b); 
      }); 

      $('.it3').change(function() { 
       c = $(this).find('option:selected').val(); 
       // alert(a); 
      }); 

      var e = a + b + c; 


     }); 
    </script> 

Answer 1

あなたのコードは冗長性をたくさん持っているおかげで これを行うための簡単な方法は非常に

GridViewのコードは理解されるであろう。セレクタjqueryをより効率的に使用する必要があります。これはあなたがする必要があるすべてです。解決

$(document).ready(function() { 
     $('select[id^=ddl]').change(function() { // target all select element whose ID starts with ddl 
      var selectedValue = $(this).find('option:selected').val(); 
      $("input[id*=tbHazRat]").val(selectedValue);     
     }); 
    }); 

Answer 2

： 私はUpdatePanelのとAjaxを使用して全体のGridViewを入れて、所望の機能が達成されました。 各DropDownList SelectedIndexChangedイベントが非同期で呼び出され、3つのドロップダウンリストからパラメータを取得し、GridView Rowをインデックスとして使用してTextBoxに結果を表示するCalculateという別のメソッド