2014-02-09 - Learn Jquery | Learning Javascript | Jquery Tutorials | Jquery Articles | Learn Scripting

How to add an option to a dropdown list using Jquery?

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoNormal">
<div class="MsoNormal">
<div class="MsoNormal">
Description:<o:p></o:p></div>
<div class="MsoNormal">
 </div>
<div class="MsoNormal">
In this article, I
will explain how to add data to dropdown list using append and prepend method.  <o:p></o:p></div>
<div class="MsoNormal">
 </div>
<div class="MsoNormal">
If we want to add data
at the beginning with the dropdown list, we can use prepend () method.</div>
<div class="MsoNormal">
 </div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
$('#idofdropdown').prepend
($('<option></option>').val('Value').html('Text'));<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
 </div>
<div class="MsoNormal">
If we want to add data at the end, we can use append ()
method.<o:p></o:p></div>
<div class="MsoNormal">
 </div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
$('#idofdropdown).append
($('<option></option>').val('Value').html('Text'));<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
 </div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
If we
want to add blank data at the beginning with the dropdown list,<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
 </div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
$('#idofdropdown').prepend
($('<option></option>').val('0').html('--Select--'));<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
 </div>
<div class="MsoNormal">
If you want to add data to dropdown based on some event, you can do by the following ways.  </div>
<div class="MsoNormal">
 </div>
<div class="MsoNormal">
In the following example, I am adding dropdown values based on click event. Here, I am adding data to dropdown using append () and prepend () method.</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
 </div>
<div class="MsoNormal">
Example Program:<o:p></o:p></div>
<div class="MsoNormal">
 </div>
<div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;">

<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<html xmlns="http://www.w3.org/1999/xhtml"><o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<head runat="server"><o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
   
<title></title><o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
   
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"><o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
   
</script><o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
   
<script
type="text/javascript"><o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
        $(document).ready(function () {<o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
            $('#btnAppendDD').click(function () {                ('#ddlCountry').append($('<option></option>').val('England').html('England'));<o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
                return
false;<o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
            });<o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
            $('#btnPrependDD').click(function () {                $('#ddlCountry').prepend($('<option></option>').val('Africa').html('Africa'));<o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
                return false;<o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
            });<o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
        });<o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
   
</script><o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
</head><o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<body><o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
   
<form
id="form1"
runat="server"><o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
   
<div><o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
        <asp:DropDownList ID="ddlCountry" runat="server"><o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
            <asp:ListItem>India</asp:ListItem><o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
            <asp:ListItem>Pakistan</asp:ListItem><o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
            <asp:ListItem>Australia</asp:ListItem><o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
        </asp:DropDownList><o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
                <asp:Button ID="btnAppendDD" runat="server" Text="Append Dropdown" /><o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
        <asp:Button ID="btnPrependDD" runat="server" Text="Prepend Dropdown" /><o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
   
</div><o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
   
</form><o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
</body><o:p></o:p></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
</html><o:p></o:p></div>
</div>
<div class="MsoNormal">
 </div>
 
<div class="MsoNormal">
 </div>
</div>
</div>
</div>

How to add an option to a dropdown list using Jquery?

Description: In this article, I will explain how to add data to dropdown list using append and prepend method. If we want to ad...

How to do date validation using Jquery?

<div style="border: none; margin-bottom: .0001pt; margin: 0in; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in;">
                var dt = $('#txtDate').val();<o:p></o:p></div>
<u1:p></u1:p>

<div style="border: none; margin-bottom: .0001pt; margin: 0in; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in;">
                return DateValidationFunc(dt);<o:p></o:p></div>
<u1:p></u1:p>

<div style="border: none; margin-bottom: .0001pt; margin: 0in; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in;">
        function DateValidationFunc(input) {<o:p></o:p></div>
<u1:p></u1:p>

<div style="border: none; margin-bottom: .0001pt; margin: 0in; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in;">
            var dtFormat =
/^\d{1,4}[\.|\/|-]\d{1,2}[\.|\/|-]\d{1,4}$/;<o:p></o:p></div>
<u1:p></u1:p>

<div style="border: none; margin-bottom: .0001pt; margin: 0in; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in;">
            if (dtFormat.test(input))
{<o:p></o:p></div>
<u1:p></u1:p>

<div style="border: none; margin-bottom: .0001pt; margin: 0in; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in;">
               
input = input.replace(/0*(\d*)/gi, "$1");<o:p></o:p></div>
<u1:p></u1:p>

<div style="border: none; margin-bottom: .0001pt; margin: 0in; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in;">
                var dtArray =
input.split(/[\.|\/|-]/);<o:p></o:p></div>
<u1:p></u1:p>

<div style="border: none; margin-bottom: .0001pt; margin: 0in; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in;">
               
dtArray[1] = dtArray[1] - 1;<o:p></o:p></div>
<u1:p></u1:p>

<div style="border: none; margin-bottom: .0001pt; margin: 0in; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in;">
                if (dtArray[2].length
< 4) {<o:p></o:p></div>
<u1:p></u1:p>

<div style="border: none; margin-bottom: .0001pt; margin: 0in; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in;">
                   
dtArray[2] = (parseInt(dtArray[2]) < 50) ? 2000 + parseInt(dtArray[2]) :
1900 + parseInt(dtArray[2]);<o:p></o:p></div>
<u1:p></u1:p>

<div style="border: none; margin-bottom: .0001pt; margin: 0in; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in;">
                var Dateval = new Date(dtArray[2],
dtArray[1], dtArray[0]);<o:p></o:p></div>
<u1:p></u1:p>

<div style="border: none; margin-bottom: .0001pt; margin: 0in; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in;">
                if (Dateval.getDate() !=
dtArray[0] || Dateval.getMonth() != dtArray[1] || Dateval.getFullYear() !=
dtArray[2]) {<o:p></o:p></div>
<u1:p></u1:p>

<div style="border: none; margin-bottom: .0001pt; margin: 0in; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in;">
                    return false;<o:p></o:p></div>
<u1:p></u1:p>

<div style="border: none; margin-bottom: .0001pt; margin: 0in; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in;">
                    return true;<o:p></o:p></div>
<u1:p></u1:p>