秀格动态当用户在文本框中输入的号码 [英] show div dynamically when user entered number in a textbox

问题描述

我有文本框一个id #txtUserEntry 其中，用户可以把自己的家人住在他们家的数量和一个按钮 #btnAddOccupant 点击后，他们把一个文本框号和 #divOccupantProfile 应该出现取决于输入的号码所以这意味着1家庭成员为1 #divOccupantProfile

I have textbox with an id #txtUserEntry where user can put the number of their family member living in their house and a button #btnAddOccupant to click after they put a number in textbox and #divOccupantProfile should show up depends on the number entered so it means 1 family member is equal to 1 #divOccupantProfile

ASPX code

aspx code

<tr>
    <td style="text-align:left"><asp:Label ID="lbUserEntry" runat="server" Text="Number of House occupant"></asp:Label></td>
    <td><asp:TextBox ID="txtUserEntry" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
    <td style="text-align:left"><asp:Button ID="btnAddOccupant" runat="server" Text="+" />
    <asp:Label ID="lbres5" runat="server" Text="Add Occupant"></asp:Label></td>
 </tr>

divOccupantProfile

divOccupantProfile

<div id="divOccupantProfile">

<asp:Label ID="OPfamilyname" runat="server" Text="Family Name"></asp:Label>
<asp:TextBox ID="textOPfamilyname" runat="server"></asp:TextBox><br />

<asp:Label ID="OPfirstname" runat="server" Text="First Name"></asp:Label>
<asp:TextBox ID="textOPfirstname" runat="server"></asp:TextBox><br />

<asp:Label ID="OPmiddlename" runat="server" Text="Middle Name"></asp:Label>
<asp:TextBox ID="textOPmiddlename" runat="server"></asp:TextBox><br />

<asp:Label ID="OPmaritalstatus" runat="server" Text="Marital Status"></asp:Label>
<asp:DropDownList ID="ddlOPmaritalstatus" runat="server" >
    <asp:ListItem></asp:ListItem>
    <asp:ListItem>Married</asp:ListItem>
    <asp:ListItem>Single</asp:ListItem>
    <asp:ListItem>Divorced</asp:ListItem>
</asp:DropDownList><br />

<asp:Label ID="OPoccupation" runat="server" Text="Occupation"></asp:Label>
<asp:TextBox ID="textOPoccupation" runat="server"></asp:TextBox><br />

<asp:Label ID="OPrelationship" runat="server" Text="Relationship"></asp:Label>
<asp:DropDownList ID="ddlOPrelationship" runat="server" >
    <asp:ListItem></asp:ListItem>
    <asp:ListItem>Wife</asp:ListItem>
    <asp:ListItem>Daughter</asp:ListItem>
    <asp:ListItem>Son</asp:ListItem>
    <asp:ListItem>Father</asp:ListItem>
    <asp:ListItem>Mother</asp:ListItem>
    <asp:ListItem>House helper</asp:ListItem>
    <asp:ListItem>Driver</asp:ListItem>
 </asp:DropDownList>

 </div>

有人可以告诉我一个例子，如何做到这一点有一个

can someone show me an example how to do this one

推荐答案

像

$('#btnAddOccupant').click(function(){
        var occupants = $('#txtUserEntry').val();
        //here some check on occupants.....

        for(int i = 0;i<occupants;i++){
            $(somewhere).append($('#divOccupantProfile').html());
        }
    })

的几点建议：
因为你要使用多个divOccupantProfile，最好还是使用基于类而不是ID选择，否则在你的页面，你就会有1+具有相同ID的元素。

Some suggestions: because you are going to use multiple divOccupantProfile, it's better to use selectors based on the class instead of ID, otherwise in your page you'll have 1+ elements with the same ID.

该$（的地方）
是你希望把所有涉及到每个乘客的个人资料在div容器

The $(somewhere) is the "container" where you want to put all the div related to each occupant profile

另外请注意，将.html（）函数将HTML复制里面的DIV，exluding股利本身。所以，如果你想拥有这样形成N个元素

Also note that the .html() function will copy the html INSIDE the div, exluding the div itself. So if you want to have N elements formed in this way

<div class="occupantProfile">...</div>
<div class="occupantProfile">...</div>

您必须使用

somewhere.append($('<div').append($('.occupantProfile')).html())

这篇关于秀格动态当用户在文本框中输入的号码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！