如何使用jquery在Datalist控件中获取asp.net文本框多行模式的ID

时间:2012-02-09 14:53:06

标签: jquery asp.net textbox datalist multiline

我在数据列表中有两个带结算和收货地址的部分:

 <asp:DataList ID="dldirectory" runat="server" Width="100%" 
    RepeatColumns="1" EnableViewState="False" DataKeyField="Id" >
    <ItemTemplate>

                         <asp:TextBox ID="txtBillingAddress" runat="server" Text='<%# Eval("BillingFullAddress") %>' TextMode="MultiLine" Width="200" Height="150"></asp:TextBox>

                        <asp:CheckBox ID="chkCopy" runat="server" Text="Same as Billing Address." />

                         Address:
                         <asp:TextBox ID="txtDeliveryAddress" runat="server" Text='<%# Eval("DeliveryFullAddress") %>' TextMode="MultiLine" Width="200" Height="150"></asp:TextBox>
                         </ItemTemplate>

            <ItemStyle Width="50%" />
        </asp:DataList>

          <script type="text/javascript">

   $(document).ready(function () {
       $('input:checkbox[id*=chkCopy]').change(function () {
           if ($(this).is(':checked')) {$('input:text[id*=txtDeliveryAddress]').val($('input:text[id*=txtBillingAddress]').val());   }
       });
   });

只有当文本框模式设置为单一时,上面的脚本才能正常工作,并且当选中复选框时,复制并粘贴在txtBillingAddress上的传递地址上显示的文本,但是当textmode设置为multiline时,jquery会失败textarea以不同的方式呈现。

如何将asp.net文本框设置为多行模式,如何获得完全相同的功能。

由于

更新了html:

<textarea name="ctl00$MainContent$CustomersDefaultPaging$ctl00$txtBillingAddress" rows="2" cols="20" id="ctl00_MainContent_CustomersDefaultPaging_ctl00_txtBillingAddress" style="height:150px;width:200px;"></textarea>

3 个答案:

答案 0 :(得分:1)

在多线模式下使用textbox控制时,它会渲染一个textarea,因此您的选择器应该是不同的。 input:text选择器会查找text类型的输入字段,但不会选择textarea。试试这个。

   $(document).ready(function () {
       $('input:checkbox[id*=chkCopy]').change(function () {
           if ($(this).is(':checked'))  {
               $('textarea[id*=txtDeliveryAddress]')
               .val($('textarea[id*=txtBillingAddress]').val());   
           }
       });
   });

因为它是DataList我确信你在页面上有多个元素所以在上面的代码中你应该通过使用复选框元素作为参考选择textarea来传递上下文。试试这个

   $(document).ready(function () {
       $('input:checkbox[id*=chkCopy]').change(function () {
           if ($(this).is(':checked'))  {
               //Assuming every item is rendered as a separate table
               //If it is inside a div the change it to div
               var $parent - $(this).closest('table');
               $parent.find('textarea[id*=txtDeliveryAddress]')
               .val($parent.find('textarea[id*=txtBillingAddress]').val());   
           }
       });
   });

答案 1 :(得分:1)

如果您使用的是.Net 4,那么我建议您查看这些控件的ClientIDMode属性。你实际上可以强迫他们使用一个更加友好的ID。

http://weblogs.asp.net/scottgu/archive/2010/03/30/cleaner-html-markup-with-asp-net-4-web-forms-client-ids-vs-2010-and-net-4-0-series.aspx

答案 2 :(得分:0)

您是否尝试使用其ID

选择文本框
$('#<%= txtDeliveryAddress.ClientID %>')

如果您使用ID来代替它,那么您无需担心它如何在客户端呈现标记。