Created
September 29, 2013 21:44
-
-
Save cgkio/6756859 to your computer and use it in GitHub Desktop.
Dropdownlist Manipulation using jQuery
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> | |
| </head> | |
| <body> | |
| <h3>Dropdownlist Manipulation using jQuery</h3> | |
| <div style="border:3px dashed black;padding:10px;width:40%"> Countries: | |
| <select id="countries"> | |
| </select> | |
| <p> | |
| <input type="button" id="btnIn" value="Select India"/> | |
| <input type="button" id="btnAus" value="Select Australia"/> | |
| <input type="button" id="btnEng" value="Select England"/> | |
| </p> | |
| <p> <b>Select an item from country dropdownlist to populate the below texts</b><br /> | |
| Selected Country's Text: <span id="countryText" style="color:Green;font-weight:bold"></span> <br /> | |
| Selected Country's Value: <span id="countryValue" style="color:Green;font-weight;bold"></span> </p> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function () { | |
| var myCollection = { | |
| 'IN': 'India', | |
| 'AUS': 'Australia', | |
| 'ENG': 'England' | |
| }; | |
| loadDropDownList(myCollection); | |
| $("#btnIn").click(function () { | |
| $("#countries").val('IN'); | |
| }); | |
| $("#btnEng").click(function () { | |
| $("#countries").val('ENG'); | |
| }); | |
| $("#btnAus").click(function () { | |
| $("#countries").val('AUS'); | |
| }); | |
| $("#countries").change(function () { | |
| $("#countryValue").text($("#countries").val()); | |
| $("#countryText").text($("#countries > option[selected]").html()); | |
| // Place your code here | |
| }); | |
| }); | |
| function loadDropDownList(collection) { | |
| $.each(collection, function (index, value) { | |
| var listItem = $("<option></option>").val(index).html(value); | |
| $("#countries").append(listItem); | |
| }); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| src: http://sweettam.blogspot.com/2011/02/in-this-blog-we-are-going-to-see-how.html |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment