动态添加html控件的jquery代码出错
这是我的用于添加 html 控件的 Html 和 jquery 代码 动态地。这是我的 jquery 部分 代码（添加子控件数量 动态）效果很好。但是第二个 添加编号的部分。婴儿没有 工作。有什么问题。 为什么第二个下拉列表不起作用。？？？？？？需要帮助
----------------------第一部分------------------------ --------------------
<div class="grid_top "><b>
No. Of Children
<strong>
<% = Html.DropDownList("ddlNoOfChildren", new SelectList(new[] { "1", "2", "3", "4", "5", "6" }, ViewData["childs"]), new { id = "ddlNoOfChildren" })%>
</strong>
</b></div>
<div class="ledger_subtable create_tbl" style="margin:1px 0">
<table id="Character" width="100%">
<tr>
<th>
<label>
Mr/Mrs/Ms
</label>
</th>
<th>
<label>
Lastname
</label>
</th>
<th>
<label>
Firstname
</label>
</th>
<th>
<label>
Email Id
</label>
</th>
<th>
<label>Passport No</label>
</th>
<th>
<label>Nationality</label>
</th>
</tr>
<tr id="trow_0">
<td>
<% = Html.DropDownList("ddlSalts_0", new SelectList(new[] { "Mr", "Mrs", "Ms" }))%>
</td>
<td>
<%=Html.TextBox("LastName_0")%>
<%=Html.ValidationMessage("lastname","*")%>
</td>
<td>
<%=Html.TextBox("FirstName_0")%>
<%=Html.ValidationMessage("firstname","*")%>
</td>
<td>
<%=Html.TextBox("EmailId_0")%>
<%=Html.ValidationMessage("emailid","*")%>
</td>
<td>
<%=Html.TextBox("PassportNo_0")%>
<%=Html.ValidationMessage("passportNo","*")%>
</td>
<td>
<% = Html.DropDownList("ddlNationality_", new SelectList(new[] { "Nepali", "Foreigner" }), new { id = "ddlNationality_" })%>
</td>
</tr>
</table></div>
<%-- ----------------------- Second part ----------- --%>
<div class="grid_top "><b>
No. Of Infant
<strong>
<% = Html.DropDownList("ddlNoOfInfants", new SelectList(new[] { "1", "2", "3", "4", "5", "6" }, ViewData["Infants"]), new { id = "ddlNoOfInfants" })%>
</strong>
</b></div>
<div class="ledger_subtable create_tbl" style="margin:1px 0">
<table id="character2" width="100%">
<tr>
<th>
<label>
Mr/Mrs/Ms
</label>
</th>
<th>
<label>
Lastname
</label>
</th>
<th>
<label>
Firstname
</label>
</th>
<th>
<label>
Email Id
</label>
</th>
<th>
<label>Passport No</label>
</th>
<th>
<label>Nationality</label>
</th>
</tr>
<tr id="trow2_0">
<td>
<% = Html.DropDownList("ddlSalts2_0", new SelectList(new[] { "Mr", "Mrs", "Ms" }))%>
</td>
<td>
<%=Html.TextBox("LastName2_0")%>
<%=Html.ValidationMessage("lastname", "*")%>
</td>
<td>
<%=Html.TextBox("FirstName2_0")%>
<%=Html.ValidationMessage("firstname", "*")%>
</td>
<td>
<%=Html.TextBox("EmailId2_0")%>
<%=Html.ValidationMessage("emailid", "*")%>
</td>
<td>
<%=Html.TextBox("PassportNo2_0")%>
<%=Html.ValidationMessage("passportNo", "*")%>
</td>
<td>
<% = Html.DropDownList("ddlNationality2_", new SelectList(new[] { "Nepali", "Foreigner" }), new { id = "ddlNationality2_" })%>
</td>
</tr>
</table></div>
----------------------------- Jquery -------------------------------------
<script type="text/javascript">
$(document).ready(function () {
var flag = false;
function removeDynamicallyCreatedRows() {
var rowCount = $('#Character tr').length;
for (var x = 1; x <= rowCount; x++) {
$('#trow_' + x).remove();
}
}
function removeDynamicallyCreatedRows2() {
var rowCount = $('#Character2 tr').length;
for (var x = 1; x <= rowCount; x++) {
$('#trow2_' + x).remove();
}
}
///////////////////////////No of Infants/////////////////////////////
$("#ddlNoOfChildren").change(function () {
if (flag) {
removeDynamicallyCreatedRows();
}
flag = true;
var self = $(this).val();
//Keep the info for no of passengers that is added
$("#noOfPassengers").val(self);
var countChar = 0;
$("[name=ddlSalts_]").attr("Name", "ddlSalts_" + countChar);
$("[name=LastName_]").attr("Name", "LastName_" + countChar);
$("[name=FirstName_]").attr("Name", "FirstName_" + countChar);
$("[name=EmailId_]").attr("Name", "EmailId_" + countChar);
$("[name=PassportNo_]").attr("Name", "PassportNo_" + countChar);
$("[name=ddlNationality_]").attr("Name", "ddlNationality_" + countChar);
$("[id=ddlSalts_]").attr("Id", "ddlSalts_" + countChar);
$("[id=LastName_]").attr("Id", "LastName_" + countChar);
$("[id=FirstName_]").attr("Id", "FirstName_" + countChar);
$("[id=EmailId_]").attr("Id", "EmailId_" + countChar);
$("[id=PassportNo_]").attr("Id", "PassportNo_" + countChar);
$("[id=ddlNationality_]").attr("Id", "ddlNationality_" + countChar);
for (var i = 1; i < self; i++) {
var newCharacter = '<tr id = "trow_' + i + '">'
+ '<td><select id = "ddlSalts_' + i + '" name="ddlSalts_' + i + '"><option value = "1">Mr</option><option value = "2">Mrs</option><option value= "3">Ms</option></select></td>'
+ '<td><input type = "text" name = "LastName_' + i + '" id = "LastName_' + i + '"></td>'
+ '<td><input type = "text" name = "FirstName_' + i + '" id = "FirstName_' + i + '"></td>'
+ '<td><input type = "text" name = "EmailId_' + i + '" id = "EmailId_' + i + '"></td>'
+ '<td><input type = "text" name = "PassportNo_' + i + '" id = "PassportNo_' + i + '"></td>'
+ '<td><select id = "ddlNationality_' + i + '" name = "ddlNationality_' + i + '" ><option value = "1">Nepali</option><option value = "2">Foreigner</option></select></td>'
+
'</tr>'
$("#Character tr:last").after(newCharacter);
}
return;
});
$("#ddlNoOfInfants").change(function () {
if (flag) {
removeDynamicallyCreatedRows2();
}
flag = true;
var self = $(this).val();
//Keep the info for no of passengers that is added
//$("#noOfPassengers").val(self);
var countChar = 0;
$("[name=ddlSalts2_]").attr("Name", "ddlSalts2_" + countChar);
$("[name=LastName2_]").attr("Name", "LastName2_" + countChar);
$("[name=FirstName2_]").attr("Name", "FirstName2_" + countChar);
$("[name=EmailId2_]").attr("Name", "EmailId2_" + countChar);
$("[name=PassportNo2_]").attr("Name", "PassportNo2_" + countChar);
$("[name=ddlNationality2_]").attr("Name", "ddlNationality2_" + countChar);
$("[id=ddlSalts2_]").attr("Id", "ddlSalts2_" + countChar);
$("[id=LastName2_]").attr("Id", "LastName2_" + countChar);
$("[id=FirstName2_]").attr("Id", "FirstName2_" + countChar);
$("[id=EmailId2_]").attr("Id", "EmailId2_" + countChar);
$("[id=PassportNo2_]").attr("Id", "PassportNo2_" + countChar);
$("[id=ddlNationality2_]").attr("Id", "ddlNationality2_" + countChar);
for (var i = 1; i < self; i++) {
var newCharacter = '<tr id = "trow2_' + i + '">'
+ '<td><select id = "ddlSalts2_' + i + '" name="ddlSalts2_' + i + '"><option value = "1">Mr</option><option value = "2">Mrs</option><option value= "3">Ms</option></select></td>'
+ '<td><input type = "text" name = "LastName2_' + i + '" id = "LastName2_' + i + '"></td>'
+ '<td><input type = "text" name = "FirstName2_' + i + '" id = "FirstName2_' + i + '"></td>'
+ '<td><input type = "text" name = "EmailId2_' + i + '" id = "EmailId2_' + i + '"></td>'
+ '<td><input type = "text" nam e = "PassportNo2_' + i + '" id = "PassportNo2_' + i + '"></td>'
+ '<td><select id = "ddlNationality2_' + i + '" name = "ddlNationality2_' + i + '" ><option value = "1">Nepali</option><option value = "2">Foreigner</option></select></td>'
+
'</tr>'
$("#Character2 tr:last").after(newCharacter);
}
return;
});
});
</script>
Here is my Html and jquery code for adding html control
dynamically.Here my part of jquery
code (that add No. of children control
dynamically) works well.But the second
part that add no. of infant doesn't
work.What's the problem.
Why the secong Dropdown list is not working.?????? need help
---------------------- First part--------------------------------------------
<div class="grid_top "><b>
No. Of Children
<strong>
<% = Html.DropDownList("ddlNoOfChildren", new SelectList(new[] { "1", "2", "3", "4", "5", "6" }, ViewData["childs"]), new { id = "ddlNoOfChildren" })%>
</strong>
</b></div>
<div class="ledger_subtable create_tbl" style="margin:1px 0">
<table id="Character" width="100%">
<tr>
<th>
<label>
Mr/Mrs/Ms
</label>
</th>
<th>
<label>
Lastname
</label>
</th>
<th>
<label>
Firstname
</label>
</th>
<th>
<label>
Email Id
</label>
</th>
<th>
<label>Passport No</label>
</th>
<th>
<label>Nationality</label>
</th>
</tr>
<tr id="trow_0">
<td>
<% = Html.DropDownList("ddlSalts_0", new SelectList(new[] { "Mr", "Mrs", "Ms" }))%>
</td>
<td>
<%=Html.TextBox("LastName_0")%>
<%=Html.ValidationMessage("lastname","*")%>
</td>
<td>
<%=Html.TextBox("FirstName_0")%>
<%=Html.ValidationMessage("firstname","*")%>
</td>
<td>
<%=Html.TextBox("EmailId_0")%>
<%=Html.ValidationMessage("emailid","*")%>
</td>
<td>
<%=Html.TextBox("PassportNo_0")%>
<%=Html.ValidationMessage("passportNo","*")%>
</td>
<td>
<% = Html.DropDownList("ddlNationality_", new SelectList(new[] { "Nepali", "Foreigner" }), new { id = "ddlNationality_" })%>
</td>
</tr>
</table></div>
<%-- ----------------------- Second part ----------- --%>
<div class="grid_top "><b>
No. Of Infant
<strong>
<% = Html.DropDownList("ddlNoOfInfants", new SelectList(new[] { "1", "2", "3", "4", "5", "6" }, ViewData["Infants"]), new { id = "ddlNoOfInfants" })%>
</strong>
</b></div>
<div class="ledger_subtable create_tbl" style="margin:1px 0">
<table id="character2" width="100%">
<tr>
<th>
<label>
Mr/Mrs/Ms
</label>
</th>
<th>
<label>
Lastname
</label>
</th>
<th>
<label>
Firstname
</label>
</th>
<th>
<label>
Email Id
</label>
</th>
<th>
<label>Passport No</label>
</th>
<th>
<label>Nationality</label>
</th>
</tr>
<tr id="trow2_0">
<td>
<% = Html.DropDownList("ddlSalts2_0", new SelectList(new[] { "Mr", "Mrs", "Ms" }))%>
</td>
<td>
<%=Html.TextBox("LastName2_0")%>
<%=Html.ValidationMessage("lastname", "*")%>
</td>
<td>
<%=Html.TextBox("FirstName2_0")%>
<%=Html.ValidationMessage("firstname", "*")%>
</td>
<td>
<%=Html.TextBox("EmailId2_0")%>
<%=Html.ValidationMessage("emailid", "*")%>
</td>
<td>
<%=Html.TextBox("PassportNo2_0")%>
<%=Html.ValidationMessage("passportNo", "*")%>
</td>
<td>
<% = Html.DropDownList("ddlNationality2_", new SelectList(new[] { "Nepali", "Foreigner" }), new { id = "ddlNationality2_" })%>
</td>
</tr>
</table></div>
----------------------------- Jquery -------------------------------------
<script type="text/javascript">
$(document).ready(function () {
var flag = false;
function removeDynamicallyCreatedRows() {
var rowCount = $('#Character tr').length;
for (var x = 1; x <= rowCount; x++) {
$('#trow_' + x).remove();
}
}
function removeDynamicallyCreatedRows2() {
var rowCount = $('#Character2 tr').length;
for (var x = 1; x <= rowCount; x++) {
$('#trow2_' + x).remove();
}
}
///////////////////////////No of Infants/////////////////////////////
$("#ddlNoOfChildren").change(function () {
if (flag) {
removeDynamicallyCreatedRows();
}
flag = true;
var self = $(this).val();
//Keep the info for no of passengers that is added
$("#noOfPassengers").val(self);
var countChar = 0;
$("[name=ddlSalts_]").attr("Name", "ddlSalts_" + countChar);
$("[name=LastName_]").attr("Name", "LastName_" + countChar);
$("[name=FirstName_]").attr("Name", "FirstName_" + countChar);
$("[name=EmailId_]").attr("Name", "EmailId_" + countChar);
$("[name=PassportNo_]").attr("Name", "PassportNo_" + countChar);
$("[name=ddlNationality_]").attr("Name", "ddlNationality_" + countChar);
$("[id=ddlSalts_]").attr("Id", "ddlSalts_" + countChar);
$("[id=LastName_]").attr("Id", "LastName_" + countChar);
$("[id=FirstName_]").attr("Id", "FirstName_" + countChar);
$("[id=EmailId_]").attr("Id", "EmailId_" + countChar);
$("[id=PassportNo_]").attr("Id", "PassportNo_" + countChar);
$("[id=ddlNationality_]").attr("Id", "ddlNationality_" + countChar);
for (var i = 1; i < self; i++) {
var newCharacter = '<tr id = "trow_' + i + '">'
+ '<td><select id = "ddlSalts_' + i + '" name="ddlSalts_' + i + '"><option value = "1">Mr</option><option value = "2">Mrs</option><option value= "3">Ms</option></select></td>'
+ '<td><input type = "text" name = "LastName_' + i + '" id = "LastName_' + i + '"></td>'
+ '<td><input type = "text" name = "FirstName_' + i + '" id = "FirstName_' + i + '"></td>'
+ '<td><input type = "text" name = "EmailId_' + i + '" id = "EmailId_' + i + '"></td>'
+ '<td><input type = "text" name = "PassportNo_' + i + '" id = "PassportNo_' + i + '"></td>'
+ '<td><select id = "ddlNationality_' + i + '" name = "ddlNationality_' + i + '" ><option value = "1">Nepali</option><option value = "2">Foreigner</option></select></td>'
+
'</tr>'
$("#Character tr:last").after(newCharacter);
}
return;
});
$("#ddlNoOfInfants").change(function () {
if (flag) {
removeDynamicallyCreatedRows2();
}
flag = true;
var self = $(this).val();
//Keep the info for no of passengers that is added
//$("#noOfPassengers").val(self);
var countChar = 0;
$("[name=ddlSalts2_]").attr("Name", "ddlSalts2_" + countChar);
$("[name=LastName2_]").attr("Name", "LastName2_" + countChar);
$("[name=FirstName2_]").attr("Name", "FirstName2_" + countChar);
$("[name=EmailId2_]").attr("Name", "EmailId2_" + countChar);
$("[name=PassportNo2_]").attr("Name", "PassportNo2_" + countChar);
$("[name=ddlNationality2_]").attr("Name", "ddlNationality2_" + countChar);
$("[id=ddlSalts2_]").attr("Id", "ddlSalts2_" + countChar);
$("[id=LastName2_]").attr("Id", "LastName2_" + countChar);
$("[id=FirstName2_]").attr("Id", "FirstName2_" + countChar);
$("[id=EmailId2_]").attr("Id", "EmailId2_" + countChar);
$("[id=PassportNo2_]").attr("Id", "PassportNo2_" + countChar);
$("[id=ddlNationality2_]").attr("Id", "ddlNationality2_" + countChar);
for (var i = 1; i < self; i++) {
var newCharacter = '<tr id = "trow2_' + i + '">'
+ '<td><select id = "ddlSalts2_' + i + '" name="ddlSalts2_' + i + '"><option value = "1">Mr</option><option value = "2">Mrs</option><option value= "3">Ms</option></select></td>'
+ '<td><input type = "text" name = "LastName2_' + i + '" id = "LastName2_' + i + '"></td>'
+ '<td><input type = "text" name = "FirstName2_' + i + '" id = "FirstName2_' + i + '"></td>'
+ '<td><input type = "text" name = "EmailId2_' + i + '" id = "EmailId2_' + i + '"></td>'
+ '<td><input type = "text" nam e = "PassportNo2_' + i + '" id = "PassportNo2_' + i + '"></td>'
+ '<td><select id = "ddlNationality2_' + i + '" name = "ddlNationality2_' + i + '" ><option value = "1">Nepali</option><option value = "2">Foreigner</option></select></td>'
+
'</tr>'
$("#Character2 tr:last").after(newCharacter);
}
return;
});
});
</script>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
你的选择器（“#Character”）是一个ID，当你的选择器是一个ID时，jQuery只返回一个元素。您应该使用标签名称或类。
your selector ("#Character") is an ID, jQuery only return one element when your selector is an ID. you should use tag name or class instead.