Introduction

This blog will explain how to select and manipulate the dropdown list using jQuery.

I have given example for selecting the item using both dropdown values and text and also given code to select, enable/disable, adding and deleting the options.

Code

  1. <html>
  2. <head>
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  4. </head>
  5. <body>
  6. <script type="text/javascript">
  7. $(document).ready(function(){
  8. $("#btnSelect").click(function () {
  9. var selValue = $('#ddlNames').val();
  10. selText = $("#ddlNames option:selected").text();
  11. $("#result").text(selValue + ' - ' + selText);
  12. });
  13. $("#btnRK").click(function () {
  14. // By Value
  15. $("#ddlNames").val("RK");
  16. // By Name
  17. $("#ddlNames option:contains(Ramakrishna)").attr('selected', true);
  18. });
  19. $("#btnDisIN").click(function () {
  20. $("#ddlNames option[value='IN']").attr("disabled", true);
  21. });
  22. $("#btnEnblIN").click(function () {
  23. $("#ddlNames option[value='IN']").attr("disabled", false);
  24. });
  25. $("#btnAdd").click(function () {
  26. if($("#ddlNames option[value='KI']").length == 0)
  27. {
  28. var newOption = "<option value='KI'>Kistappa</option>";
  29. $("#ddlNames").append(newOption);
  30. }
  31. });
  32. $("#btnDelete").click(function () {
  33. if($("#ddlNames option[value='KI']").length == 1)
  34. {
  35. $("#ddlNames option[value='KI']").remove();
  36. }
  37. });
  38. });
  39. </script>
  40. </head>
  41. <body>
  42. <br/><br/><br/>
  44. <select id="ddlNames">
  45. <option value="None">-- Select Name</option>
  46. <option value="RK">Ramakrishna</option>
  47. <option value="PK">Praveenkumar</option>
  48. <option value="IN">Indraneel</option>
  49. <option value="NE">Neelohith</option>
  50. </select>
  51. <p id="result" style="font-size:30px; color:red"></p>
  52. <br/><br/><br/>
  53. <input type='button' value='Selected Item' id='btnSelect'>
  54. <input type='button' value='Select Ramakrishna' id='btnRK'>
  55. <input type='button' value='Disable Indraneel' id='btnDisIN'>
  56. <input type='button' value='Enable Indraneel' id='btnEnblIN'>
  57. <input type='button' value='Add New Name' id='btnAdd'>
  58. <input type='button' value='Delete Added Name' id='btnDelete'>
  59. </body>
  60. </html>
Output