當用戶在文本框中輸入數字時，動態顯示div

我有一個文本框，其ID爲#txtUserEntry，用戶可以將他們的家庭成員的數量放在他們的房屋中，按鈕#btnAddOccupant在文本框中輸入數字後應點擊，#divOccupantProfile應該顯示取決於輸入的號碼，這樣就意味着1名家族成員是等於1個#divOccupantProfile當用戶在文本框中輸入數字時，動態顯示div

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>

有人能告訴我一個例子，如何做到這一點一個

來源

2014-01-23 Ken Hollis

像

$('#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的元素。

的$（地方）是你希望把所有涉及到每個乘員資料

還要注意的是html的（）函數將複製HTML的DIV股利的「容器」，exluding div本身。所以，如果你想擁有這樣形成N個元素

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

，你必須使用

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

來源

2014-01-23 08:34:43 Alessio

所以我需要爲$（的地方），一個div並更改ID上課嗎？ –

在我看來是更好的是，創建一個

並使用它而不是某處選擇器。實際上，我認爲在繼續閱讀之前閱讀Jquery文檔會更好，否則你會不知道你在做什麼，而不知道你在做什麼;） – Alessio

這是我的問題我一直在閱讀一些代碼，但我仍然不知道該怎麼做，發生了什麼事情。< –

在這裏，我已經做出了樣品，你應該找到什麼有用的

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

來源

2014-01-23 08:59:47 Rex

太棒了，謝謝你的這個@Rex會幫助我很多 –

當用戶在文本框中輸入數字時，動態顯示div

回答

相關問題