How to manipulate dropdownlist using jQuery
In this article I have explained about How to manipulate dropdownlist using jQuery. Each steps I have clearly explained in this article .
In this article I have explained about how to Manipulate dropdownlist
using JQuery. Each steps I have clearly explained in this article .
The jQuery API offers lot of useful function to operation with html form elements.For Example
Change() function which will called whenever the item value is get changed.
To load dropdownlist dynamically
/* Dynamically load dropdown list values */
var CollectionofCountry = {'IND': 'India','AUS': 'Australia','ENG': 'England','SRI': 'Srilanka','OT' : 'Others'};
$.each(CollectionofCountry, function (index, value)
{
var listItem = $("").val(index).html(value);
$("#ddlCountry").append(listItem);
});
To get dropdownlist selected text and vlaue
$("#ddlCountry").change(function () {
$("#lblCountryValue").text($("#ddlCountry").val());
$("#lblCountryText").text($("#ddlCountry > option[selected]").html());
});
To set india as Selected text
$("#btnIndia").click(function () {
$("#ddlCountry").val('IND');
});
To Remove items from dropdownlist we can use below statement
$("#Dropdownlistname option[value='valToRemove']").remove();
To get the text of a selected item:
$('#Dropdownlistname:selected').text();
Full Code as follows
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
/* Dynamically load dropdown list values */
var CollectionofCountry = {'IND': 'India','AUS': 'Australia','ENG': 'England','SRI': 'Srilanka','OT' : 'Others'};
$.each(CollectionofCountry, function (index, value)
{
var listItem = $("<option></option>").val(index).html(value);
$("#ddlCountry").append(listItem);
});
/* To get dropdownlist selected text and vlaue */
$("#ddlCountry").change(function () {
$("#lblCountryValue").text($("#ddlCountry").val());
$("#lblCountryText").text($("#ddlCountry > option[selected]").html());
});
/* To set india as Selected text */
$("#btnIndia").click(function () {
$("#ddlCountry").val('IND');
});
/*To Remove country from dropdownlist */
$("#btnRemove").click(function () {
$("#ddlCountry option[value='AUS']").remove();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width: 503px">
<tr>
<td colspan="3">
<strong><span style="font-family: Verdana">
Dropdown list manipulation using jQuery</span></strong></td>
</tr>
<tr>
<td style="width: 100px">
Select Country: </td>
<td style="width: 100px">
<select id="ddlCountry" style="width: 152px"><option></option></select>
</td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td style="width: 100px">
Selected Value</td>
<td style="width: 100px">
<asp:Label ID="lblCountryValue" runat="server" Width="151px"></asp:Label></td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td style="width: 100px">
Selected Text</td>
<td style="width: 100px">
<asp:Label ID="lblCountryText" runat="server" Width="154px"></asp:Label></td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td style="width: 100px">
Set India as First</td>
<td style="width: 100px">
<input id="btnIndia" type="button" value="Set India as First" style="width: 155px" /></td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td style="width: 100px">
To Remove Aus</td>
<td style="width: 100px">
<input id="btnRemove" type="button" value="Remove Australia" style="width: 155px" /></td>
<td style="width: 100px">
</td>
</tr>
</table>
</div>
</form>
</body>
</html>