Hello I have combined the two articles here,
http://www.aspforums.net/Threads/160920/Get-value-of-dynamically-created-DropDownList-on-Client-Side-using-jQuery-in-ASPNet/
http://www.aspforums.net/Threads/207154/Dynamically-add-Two-TextBoxes-on-Button-Click-using-JavaScript/
But when I click the remove of textbox it removes all dropdownlist. How can I solve it?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("<div />");
div.html(AddDDL());
div.html(GetDynamicTextBox(''));
$("#TextBoxContainer").append(div);
});
$("#btnGet").bind("click", function () {
var values = "";
$("input[name=DynamicTextBox]").each(function () {
values += $(this).val() + "\n";
});
alert(values);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
var ddlId = $('[id*=hfDDLId]').val();
$('[id$=ddl' + parseInt(ddlId) + ']').remove();
$('[id*=hfDDLId]').val(parseInt($('[id*=hfDDLId]').val()) - 1);
var previousDropDownId = $('[id*=hfDropDownIds]').val();
if (previousDropDownId != '') {
var Ids = previousDropDownId.split(',');
Ids = $.grep(Ids, function (Id) {
return Id != parseInt(ddlId);
});
var resultIds = Ids.join(',');
$('[id*=hfDropDownIds]').val(resultIds);
}
});
});
function AddDDL() {
var Id = parseInt($('[id*=hfDDLId]').val()) + 1;
var ddlId = "ddl" + (Id);
//var optionList = [1, 2, 3, 4, 5];
//$('[id*=div1]').append(getDropDownList(ddlId, ddlId, optionList));
$("#TextBoxContainer").append(getDropDownList(ddlId, ddlId));
$('[id*=hfDDLId]').val(Id);
var previousDropDownId = $('[id*=hfDropDownIds]').val();
if (previousDropDownId != '') {
$('[id*=hfDropDownIds]').val(previousDropDownId + ',' + Id);
} else {
$('[id*=hfDropDownIds]').val(Id);
}
return false;
}
function getDropDownList(name, id) {
var combo = $("<select></select>").attr("id", id).attr("name", name).attr("runat", "server").attr("class", "class").attr("required", "required");
//$.each(optionList, function (i, el) {
combo.append("<option value=" + "" + ">" + "Select Category" + "</option>");
combo.append("<option value=" + "1" + ">" + "1" + "</option>");
combo.append("<option value=" + "2" + ">" + "2" + "</option>");
combo.append("<option value=" + "3" + ">" + "3" + "</option>");
//});
return combo;
}
function GetDynamicTextBox(value) {
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" required/> '
+ '<input name = "DynamicTextBox" type="text" value="' + value + '" required/> '
+ '<input type="button" value="Remove" class="remove" />'
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="btnAdd" type="button" value="Add" />
<br />
<br />
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
</div>
<br />
<input type="hidden" id="hfSelectedValue" runat="server" />
<input type="hidden" id="hfDropDownIds" value="" runat="server" />
<input id="btnGet" type="button" value="Get Values" />
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
</body>
</html>