показывать div динамически, когда пользователь вводит число в текстовое поле

0

У меня есть текстовое поле с идентификатором #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>

может кто-нибудь показать мне пример, как это сделать?

2 ответа

1
Лучший ответ

что-то вроде

$('#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())
  • 0
    поэтому мне нужно сделать div для $ (где-то) и изменить идентификатор на класс?
  • 0
    по моему мнению, лучше да, создайте <div id = "оккупантКонтейнер"> </ div> и используйте его вместо где-то селектора. на самом деле, я думаю, что вам лучше прочитать документацию Jquery, прежде чем продолжить, иначе вы будете кодировать, не понимая точно, что вы делаете;)
Показать ещё 6 комментариев
1

Здесь я сделал образец для того, что вы должны найти полезным

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");
})

Demo Link

  • 0
    Круто, спасибо за это @Rex, оно мне очень поможет

Ещё вопросы

Сообщество Overcoder
Наверх
Меню