Click here to check my latest exciting videos on youtube
Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment


Locations of visitors to this page


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
5061 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(https://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
Get set field, Properties,events or method using reflection
Demo of Jquery functions and events for dropdownlist
Change color of grid view row or cell dynamically
Working with AJAX cascading dropdown
Working with Stack Panel in silverlight
Changing Grid View header and footer at run time
Different types of File Read Operations
Select range of HTML elements using Jquery slice function
Appending Html elements or contents dynamically
Working with silver light datagrid

Post Comment