2016-02-10 18 views
0

我在asp.net gridview中使用radcombobox。 現在我想要的是,如果用戶從組合框中選擇一個特殊的值,toogle一個divs可見性。但由於呈現的代碼,我不知道我必須做什麼。通過jquery(asp.net gridview,radcombobox)在dom中查找和切換div

這是渲染代碼:

<td> 
    <div class="colColor DivInHere" style="margin-top:8px;margin-right:2px;display:inline-block;float:left;">Artikel</div> 
    <div class="colColor" style="margin-top:7px;float:left;margin-left:28px;"> 
     <div id="ctl00_ContentPlaceHolder1_gvRechnungsposition_ctl02_rcbArtikel" class="RadComboBox RadComboBox_Metro" style="width:200px;margin-left:5px;"> 
      <table class="rcbFocused" style="border-width: 0px; border-collapse: collapse;" summary="combobox"> 
       <tbody> 
        <tr> 
         <td class="rcbInputCell rcbInputCellLeft" style="width:100%;"> 
          <input id="ctl00_ContentPlaceHolder1_gvRechnungsposition_ctl02_rcbArtikel_Input" class="rcbInput radPreventDecorate" type="text" style="color:rgb(166, 204, 213);" value="Bitte wählen ..." name="ctl00$ContentPlaceHolder1$gvRechnungsposition$ctl02$rcbArtikel" autocomplete="off"> 
         </td> 
         <td class="rcbArrowCell rcbArrowCellRight"> 
          <a id="ctl00_ContentPlaceHolder1_gvRechnungsposition_ctl02_rcbArtikel_Arrow" style="overflow: hidden;display: block;position: relative;outline: none;">select</a> 
         </td>     
        </tr> 
       </tbody> 
      </table> 
      <input id="ctl00_ContentPlaceHolder1_gvRechnungsposition_ctl02_rcbArtikel_ClientState" type="hidden" name="ctl00_ContentPlaceHolder1_gvRechnungsposition_ctl02_rcbArtikel_ClientState" autocomplete="off" value="{"logEntries":[],"value":"Benutzerdefiniert","text":"Benutzerdefiniert","enabled":true,"checkedIndices":[],"checkedItemsTextOverflows":false}"> 
     </div> 
    </div> 
    <div style="clear:both"></div> 
</td> 
<td> 
    <div class="colColor in" style="margin-left:10px;margin-right:10px;display:none;"> 
</td> 

這是我的代碼之前渲染:

...  
<asp:TemplateField> 
         <ItemTemplate> 
          <div class="colColor DivInHere" style="margin-top:8px;margin-right:2px;display:inline-block;float:left;">Artikel</div> 
          <div class="colColor" style="margin-top:7px;float:left;margin-left:28px;"> 
           <telerik:RadComboBox runat="server" ID="rcbArtikel" Width="200px" Skin="Metro" AllowCustomText="true" 
            EmptyMessage="Bitte wählen ..." CloseDropDownOnBlur="true" LoadingMessage="... Ladevorgang ..." 
            Filter="Contains" MarkFirstMatch="true" ForeColor="#a6ccd5" style="margin-left:5px;" 
            DataTextField="ArtikelBeschreibung" DataValueField="ArtikelID" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged"> 
           </telerik:RadComboBox> 
          </div> 
          <div style="clear:both"></div> 
         </ItemTemplate> 
        </asp:TemplateField> 
        <asp:BoundField DataField="ArtikelID" Visible="false"></asp:BoundField> 
        <asp:TemplateField> 
         <ItemTemplate> 
          <div class="colColor in" style="margin-left:10px;margin-right:10px;display:none;"> 
           Beschreibung <asp:TextBox ID="tbBenutzerdefiniert" runat="server" MaxLength="250" Text="0" Width="200px" CssClass="inputWhite"></asp:TextBox> 
          </div> 
         </ItemTemplate> 
        </asp:TemplateField> 
... 

我想,如果rcbArtikel火災OnClientSelectedIndexChanged切換這個div:<div class="colColor in" style="margin-left:10px;margin-right:10px;display:none;"> 通過其類。在

這是我的功能:

  function OnClientSelectedIndexChanged(sender, eventArgs) { 
      var item = eventArgs.get_item(); 

      var selItem = item.get_text(); 
      if (selItem == "Benutzerdefiniert") { 
       //$(".in").toggle(); 
       $(this).closest('td > tr > tbody > table > div > div > td').next('td').find('.in').show(); 
      }; 

     } 

我希望你明白我想要做的,感謝閱讀

回答

0

好吧,我發現我工作的解決方案。 也許它可以幫助有類似問題的人:

主要問題是,我忘了從我的radcombobox獲取正確的ID。 我做了這樣的:var currentId = '#' + $(sender).attr('_clientStateFieldID');

這是我現在的功能:

function OnClientSelectedIndexChanged(sender, eventArgs) { 

      var item = eventArgs.get_item(); 
      var selItem = item.get_text(); 
      var currentId = '#' + $(sender).attr('_clientStateFieldID'); 

      if (selItem == "Benutzerdefiniert") { 
       $(currentId).parent().parent().parent().next('td').find('div.in').toggle(); 
      } else { 
       $(currentId).parent().parent().parent().next('td').find('div.in').hide(); 
      }; 

     } 

同樣,也肯定有更好的解決方案在那裏!