Posted: 6/27/2010
Hi experts,
I want to remove some of the options based on my condition from the dropdownlist, but I want to do it so in client side. Please help me.
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> </head> <body> <form runat="server"> <select id="ddlFoo"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option> </select> <br /> <input id="btnFoo" type="button" value="Remove" /> </form> </body> <script type="text/javascript"> $('#btnFoo').click(function () { //your logic here // for this case I will remove the option having values 3 and 5 $("#ddlFoo option[value='3'],option[value='5']").remove(); }); </script> </html>
Posted: 6/29/2010
The same sample that @Raghav has shown using JQuery, I have rewritten using plain Javascript.
Here is the code:
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"></head><body> <form id="Form1" runat="server"> <select id="ddlFoo"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option> </select> <input id="btnFoo" type="button" onclick="removeElements(document.getElementById('ddlFoo'))" value="Remove" /> </form></body> <script type="text/javascript"> function removeElements(elements) { alert(elements.selectedIndex); elements.options[elements.selectedIndex] = null; }</script></html>
Shortly, in this example I am removing the selected value from the DropDownList. After clicking the Remove button, the item will get removed.
All the best.
