Posteado por: edeortuzar | 19/08/2013

Agregar y borrar Items de un DropDownList o un ListBox usando Javascript


Acá les dejo el código para poder agregar o quitar Items de un DropDownList o un ListBox usando JavaScripts, espero que les sirva.

Saludos.


<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 onclick="JavaScript: DeleteItem();" type="button" value="Remove selected item" />
<input id="ddlText" type="text" name="ddlText" />
<input id="ddlValue" type="text" name="ddlValue" />
<input onclick="JavaScript: AddItem();" type="button" value="Add item" />
<input id="ddlElements" type="hidden" name="ddlElements" />

<script type="text/javascript">// <![CDATA[

    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!="" )
        {
            var option1 = document.createElement("option");
            option1.text= ddlValueRef.value;
            option1.value= ddlTextRef.value ;
            dropDownListRef.options.add(option1);
        }
        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;

    }
// ]]></script>

En el Code behind en el evento Page_Load, agregar el siguiente código…

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;
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Categorías

A %d blogueros les gusta esto: