In some occasions you may want to add one or more options to
dropdown/list box and sometimes remove items from a dropdown/list box. You can
use a simple JavaScript code to add/remove options from a dropdown/list box.
Following examples describe how to dynamically change items in a dropdown/list box.
Code: (aspx)
<asp:DropDownList ID="DropDownList1" runat="server" Width="182px">
<asp:ListItem Value="1" Text="Approve"></asp:ListItem>
<asp:ListItem Value="2" Text="Accept"></asp:ListItem>
<asp:ListItem Value="3" Text="Test1"></asp:ListItem>
<asp:ListItem Value="4" Text="Test2"></asp:ListItem>
</asp:DropDownList>
<input type="button" value="Remove selected item" onclick="JavaScript:
DeleteItem();" />
<input type="text" id="ddlText" name="ddlText" />
<input type="text" id="ddlValue" name="ddlValue" />
<input type="button" value="Add item" onclick="JavaScript: AddItem();" />
<input type="hidden" id="ddlElements" name="ddlElements" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button(Postback)" />
<script type="text/javascript">
function
DeleteItem() {
var
dropDownListRef = document.getElementById('<%=
DropDownList1.ClientID %>');
var optionsList = '';
if (dropDownListRef.value.length >
0) {
var itemIndex = dropDownListRef.selectedIndex;
if (itemIndex >= 0)
dropDownListRef.remove(itemIndex);
}
else {
alert('Please
select an item');
dropDownListRef.focus();
dropDownListRef.select();
}
for (var i = 0; i < dropDownListRef.options.length;
i++) {
var optionText = dropDownListRef.options[i].text;
var
optionValue = dropDownListRef.options[i].value;
if
(optionsList.length > 0)
optionsList += ';';
optionsList += optionText;
optionsList += ';';
optionsList += optionValue;
}
document.getElementById('<%=
ddlElements.ClientID %>').value
= optionsList;
}
function AddItem() {
var dropDownListRef = document.getElementById('<%=
DropDownList1.ClientID %>');
var ddlTextRef = document.getElementById('ddlText');
var ddlValueRef = document.getElementById('ddlValue');
var optionsList = '';
if (ddlTextRef.value != ""
&& ddlValueRef.value != "")
{
if (!isOptionAlreadyExist(document.getElementById('<%=
DropDownList1.ClientID %>'),
ddlValueRef.value)) {
var option1 = document.createElement("option");
option1.text = ddlTextRef.value;
option1.value = ddlValueRef.value;
dropDownListRef.options.add(option1);
}
else {
alert("Value " +
ddlTextRef.value + " already exists");
}
}
else
alert('Please enter values');
for (var i = 0; i
< dropDownListRef.options.length; i++) {
var optionText = dropDownListRef.options[i].text;
var optionValue = dropDownListRef.options[i].value;
if (optionsList.length > 0)
optionsList += ';';
optionsList += optionText;
optionsList += ';';
optionsList += optionValue;
}
document.getElementById('<%=
ddlElements.ClientID %>').value
= optionsList;
}
function
isOptionAlreadyExist(listBox, value) {
var exists = false;
for (var x = 0; x
< listBox.options.length; x++) {
if (listBox.options[x].value == value ||
listBox.options[x].text == value) {
exists = true;
break;
}
}
return exists;
}
</script>
In Code behind Page_Load, add following code..
Client-side changes to a Drop Down List/List Box are not persisted server-side, so any changes made will be
lost if a Post Back occurs. Added server-side
persistence to code.
if (IsPostBack)
{
DropDownList1.Items.Clear();
string[] DropDownListArray =
ddlElements.Value.Trim().Split(';');
for (int
i = 0; i < DropDownListArray.Length; i = i + 2)
{
string itemText = DropDownListArray[i];
string itemValue = DropDownListArray[i +
1];
DropDownList1.Items.Add(new ListItem(itemText, itemValue));
}
}
string optionsList = string.Empty;
for (int i = 0; i
< DropDownList1.Items.Count; i++)
{
string optionText =
DropDownList1.Items[i].Text;
string optionValue =
DropDownList1.Items[i].Value;
if (optionsList.Length > 0)
optionsList += ";";
optionsList += optionText;
optionsList += ';';
optionsList += optionValue;
}
ddlElements.Value = optionsList;
Reference:
No comments:
Post a Comment