How to add option to drop down list using jQuery


For add option using jQuery you can use below HTML and jQuery code.

<html>
   <head>
      <title>How to add option to drop down list</title>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
      <style type="text/css">
         div.demo
         {
         float:left;
         padding:25px;
         }
         #text {
         width:auto;
         margin-top: 20px;
         }
      </style>
      <script type="text/javascript">
         jQuery(document).ready(function($){
         $('.addoption').click(function(){
         	$("#text").css("display","block");
         });
         $('.Button1').click(function(){
         	var as = $("#addtext").val();
         	if(as != ""){
         	$('.DropDown').append($('<option></option>').val(as).html(as).attr('selected', 'selected'));
         	$("#addtext").val("");
         	}else{
         		alert("Write Text In Textbox");
         	}
         });
         });
      </script>
   </head>
   <body>
      <div class="dd">
         <select class="DropDown">
            <option>--Select--</option>
            <option value="Value 1">Value 1</option>
            <option value="Value 2">Value 2</option>
         </select>
         <button class="addoption">Click to add option</button>
      </div>
      <div id="text" style="display: none">
         <table cellpadding="0" cellspacing="0">
            <tr>
               <td>
                  <label> ADD TEXT</label>
               </td>
            </tr>
            <tr>
               <td>
                  <input type="test" id="addtext" value=""/>
               </td>
            </tr>
            <tr>
               <td>
                  <input type="button" value="Add"  class="Button1"/>
               </td>
            </tr>
         </table>
      </div>
   </body>
</html>

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s