over 9 years ago
Hi Readers! In this blog we will learn How we can Add and Delete items in dropdown in JavaScript. .In the bellow example we are going to add items in dropdown and delete selected item from the dropdown list on specific button click .
<html lang="en"> 02.<head> 03. <meta charset="utf-8"> 04. <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 05.<script> 06. 07. $(document).ready(function(){ 08. $("#btnAddItem").click(fnAddDropDownItem); 09. $("#btnDeleteItem").click(fnDeletedSelectedItem); 10. function fnAddDropDownItem() 11. { 12. 13. var NewItem=$("#txtItem").val(); 14. if(NewItem=="") 15. alert("Please enter some value") ; 16. else 17. { 18. var dropDown = document.getElementById("mydropdown"); 19. var option = document.createElement("option"); 20. option.text = NewItem; 21. dropDown.add(option); 22. } 23. 24. } 25. 26. function fnDeletedSelectedItem() 27. { 28. var dropDown = document.getElementById("mydropdown"); 29. dropDown.remove(dropDown.selectedIndex); 30. } 31. 32. }); 33. </script> 34. 35.</head> 36.<body> 37. 38. <div > 39. <p> DropDown Item : </p><input type="text" id="txtItem"> 40. <button id="btnAddItem" >Add to DropDown</button> 41. 42. <select id="mydropdown"> 43. <select> 44. 45. 46. <button id="btnDeleteItem" >Delete Selected Item</button> 47. </div> 48. 49. 50.</body> 51.</html>
Starting with Chrome version 45, NPAPI is no longer supported for Google Chrome. For more information, see Chrome and NPAPI (blog.chromium.org).
Firefox and Microsoft Internet Explorer are recommended browsers for websites using java applets.
Chrome Version Support
Are you sure, you want to delete this comment?
Sign up using
0 Comment(s)