У меня есть текстовое поле с идентификатором #txtUserEntry
где пользователь может поместить номер своего члена семьи, проживающего в их доме, и кнопку #btnAddOccupant
чтобы щелкнуть после того, как они поместили номер в текстовое поле, а #divOccupantProfile
должен отображаться, зависит от введенного числа, 1 член семьи равен 1 #divOccupantProfile
код aspx
<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
<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>
может кто-нибудь показать мне пример, как это сделать?
что-то вроде
$('#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+ с тем же идентификатором.
$ (Где-то) является "контейнером", в который вы хотите поместить все div, связанные с каждым профилем пользователя
Также обратите внимание, что функция.html() скопирует html INSIDE div, исключая сам div. Поэтому, если вы хотите, чтобы N элементов сформировались таким образом
<div class="occupantProfile">...</div>
<div class="occupantProfile">...</div>
вы должны использовать
somewhere.append($('<div').append($('.occupantProfile')).html())
Здесь я сделал образец для того, что вы должны найти полезным
HTML
<input type="text"http://jsfiddle.net/#save id="txtnum" />
<input type="button" value="click" id="btnSubmit" />
<div id="divOccupantProfile1">Data 1</div>
<div id="divOccupantProfile2">Data 2</div>
<div id="divOccupantProfile3">Data 3</div>
<div id="divOccupantProfile4">Data 4</div>
<div id="divOccupantProfile5">Data 5</div>
CSS
div[id^="divOccupantProfile"] {
display:none;
}
Jquery
$("#btnSubmit").click(function(){
var num = $("#txtnum").val();
$("#divOccupantProfile"+ num).css("display","block");
})