Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment




Latest Articles


Move to top
Demo of Jquery functions and events for dropdownlist
Posted By Sarin on Dec 06, 2012     RSS Feeds     Latest Hinduism news
3482 Views




JQuery provides us with a host of options and functionality while working with dropdown list. Below I have compiled some of the common jquery functions used with dropdown list.
While working on my website, I have used the following dropdown list in my admin section. I will reuse that dropdown list here for this demonstration. For demo, navigate to the end of this article.
  
<select id="ddlList">
  <option value="1">Ajax</option>
  <option value="2">ASP.NET</option>
  <option value="3">C#</option>
  <option value="4">Silverlight</option>
  <option value="5">SQL</option>
  <option value="6">jQuery/Javascript</option>
</select>
<br/><br/>
Get text or value
I have defined list of buttons below to get text or value of dropdown list
<input type="button" id="btnSelectedIndex" Value="Get Selected Index" />
  
<input type="button" id="btnSelectedText" Value="Get Selected Text" />
  
<input type="button" id="btnSelectedValue" Value="Get Selected Value" />
  
<input type="button" id="btnDropdownText" Value="Get all DropDown Text" />
<br/><br/>
Below is the associated jquery code.
    $('#btnSelectedValue').click(function()\line         alert($('#ddlList').val());
    );
   
     $('#btnSelectedText').click(function()\line       alert($('#ddlList option:selected').text());
    );
   
    $('#btnDropdownText').click(function()\line       alert($('#ddlList').text());      
    );
   
    $('#btnSelectedIndex').click(function()\line       alert($("#ddlList").get(0).selectedIndex);    
    );
Select item by index, value or text
Below is the set of buttons to select item by index, value or text of dropdown list
<input type="button" id="btnSelectLastElement" Value="Select Last Element" />
  
<input type="button" id="btnChangeSelectedIndex" Value="Select item at index 1" />
  
<input type="button" id="btnSetddlByValue" Value="Select item with value 3" />
  
<input type="button" id="btnSetddlByText" Value="Set DDL containing Text c#" />  
  
Below is the associated jquery code.   
    $('#btnSelectLastElement').click(function() {
        $("#ddlList option:last-child").attr("selected","selected");
    });
     $('#btnChangeSelectedIndex').click(function()\line        $("#ddlList").get(0).selectedIndex = 1;
    );
   
     $('#btnSetddlByValue').click(function()\line        $("#ddlList").val(3);
    );
       
    $('#btnSetddlByText').click(function()\line         $('#ddlList option:contains("c#")').attr("selected","selected");
    );
Append or remove item by index, value or text
Below is the set of buttons to append or remove item by index, value or text of dropdown list
<input type="button" id="btnAppendStart" Value="Append select one as first item" />
  
<input type="button" id="btnAppendEnd" Value="Append vb.net as last item" />
<br/><br/>
<input type="button" id="btnRemoveSelected" Value="Remove selected item" />
  
<input type="button" id="btnRemoveSelectedByVal" Value="Remove selected Item with Value 2" />
  
<input type="button" id="btnRemoveSelectedByText" Value="Remove selected  Item with Text 'HTML'" />
Below is the associated jquery code.    
    $('#btnAppendStart').click(function()\line       $("#ddlList").prepend("<option value='0' selected='selected'>--Select one-- </option>");
    );
   
     $('#btnAppendEnd').click(function()\line         $("<option value='6'>Vb.Net</option>").appendTo("#ddlList");
    );      
     $('#btnRemoveSelected').click(function()\line        $('#ddlList option:selected').remove();
    );
   
    $('#btnRemoveSelectedByVal').click(function()\line       $('#ddlList option[value="2"]').remove();
    );
   
     $('#btnRemoveSelectedByText').click(function()\line          $('#ddlList option:contains("HTML")').remove();
    );
Enable or Disable item by index, value or text
Below is the set of buttons to reset or remove multiple items
<input type="button" id="btnDisableByValue" Value="Disable Item with Value 1" />
  
<input type="button" id="btnDisableByText" Value="Disable Item By Text 'SQL'" />
<br/>
<input type="button" id="btnEnableByValue" Value="Enable Item with  value 4" />  
<input type="button" id="btnEnableByText" Value="Enable Item with Text 'SQL'" /><br/><br/>
Below is the associated jquery code.    
 $('#btnDisableByValue').click(function()\line        $("#ddlList option[value='1']").attr("disabled","disabled");
    );
   
    $('#btnDisableByText').click(function()\line        $('#ddlList option:contains("SQL")').attr("disabled","disabled");
    );
   
     $('#btnEnableByValue').click(function()\line        $("#ddlList option[value='4']").removeAttr("disabled");
    );
   
    $('#btnEnableByText').click(function()\line        $('#ddlList option:contains("SQL")').removeAttr("disabled");
    );
Reset or remove multiple items
Below is the set of buttons to reset or remove multiple items
​<input type="button" id="btnReset" Value="Reset All" /><br/><br/>
<select id="ddlRemoveFirst">
  <option value="1">Ajax</option>
  <option value="2">ASP.NET</option>
  <option value="3">C#</option>
  <option value="4">Silverlight</option>
  <option value="5">SQL</option>
  <option value="6">jQuery/Javascript</option>
</select>
<input type="button" id="btnRemoveAllExcludingFirst" Value="Remove all excluding first" />
<br/><br/>
<select id="ddlRemoveLast">
  <option value="1">Ajax</option>
  <option value="2">ASP.NET</option>
  <option value="3">C#</option>
  <option value="4">Silverlight</option>
  <option value="5">SQL</option>
  <option value="6">jQuery/Javascript</option>
</select>
<input type="button" id="btnRemoveAllExcludingLast" Value="Remove all excluding Last item" />
<br/><br/>
<select id="ddlRemoveAll">
  <option value="1">Ajax</option>
  <option value="2">ASP.NET</option>
  <option value="3">C#</option>
  <option value="4">Silverlight</option>
  <option value="5">SQL</option>
  <option value="6">jQuery/Javascript</option>
</select>
<input type="button" id="btnRemoveAll" Value="Remove All" />
  

Below is the associated jquery code.   
$('#btnRemoveAllExcludingFirst').click(function()\line        $('#ddlRemoveFirst option:not(:first)').remove();  
    );
   
    $('#btnRemoveAllExcludingLast').click(function()\line         $('#ddlRemoveLast option:not(:last)').remove();
    );
   
    $('#btnRemoveAll').click(function() {
       $("#ddlRemoveAll").empty();
    });
   
    $('#btnReset').click(function() {
       var options = '<option value="1">Ajax</option>' +
                      '<option value="2">ASP.NET</option>' +
                      '<option value="3">C#</option>' +
                      '<option value="4">Silverlight</option>' +
                      '<option value="5">SQL</option>' +
                      '<option value="6">jQuery/Javascript</option>';
       
         $('select').empty();
         $('select').append(options);
    });
Code to handle dropdown change event
jquery event to handle dropdown change event
       $('#ddlList').change(function()\line        alert('You changed Dropdown');
    );  
  
Hope this article was useful to you.

Demo:

Note: Images used on this website are either a production of Bhaktivedanta Book Trust(http://www.krishna.com), Iskcon Foundation or were found in google search under "Free to use and share". If any of the images presented here violates copyright issues or infringes anyone copyright or are not under "Fair use", then please bring it to our notice. Read Disclaimer for more.

Share this to your friends. One of your friend is waiting for your share.

Related Articles
Working with server controls and HMTL controls
Working with Stack Panel in silverlight
Appending Html elements or contents dynamically
Tips and Tricks with ajax accordion control
Select range of HTML elements using Jquery slice function
Get Set Value of any HTML element using jquery-Val function
Different types of File Write Operations
Working with AJAX ColorPickerExtender control
Demo of Jquery functions and events for dropdownlist
Changing Grid View header and footer at run time

Post Comment




Software developer by profession,
Poet by hobby,
Blogger by Passion
Birth Place: Munger, Bihar
Residence: Mumbai, Maharashtra
Prof exp: 8 years

Read More about me

Read my daily what'sapp quotes
Most Viewed Articles

Latest Spiritual Videos


Latest Funny Videos

Latest News

Latest Social Post
Latest WhatsApp Quotes