Created
January 22, 2014 07:54
-
-
Save lyonsun/8554989 to your computer and use it in GitHub Desktop.
get innerHTML of option in select element.
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> | |
| <title>HTML BASIC</title> | |
| <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> | |
| <style type="text/css" media="screen"> | |
| body { | |
| color: red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <select name="group" id="group"> | |
| <option value="0">Blue</option> | |
| <option value="1">Green</option> | |
| <option value="2">White</option> | |
| <option value="3">Black</option> | |
| </select> | |
| <div id="result"> | |
| </div> | |
| <script> | |
| // four different ways to get innerHTML text from select options. | |
| var option1 = $('select[name=group]')[0].options[0].innerHTML; | |
| $('#result').append("<div style='background: " + option1 + ";'>" + option1 + "</div>"); // prints 'Blue' | |
| var option2 = $('select[name=group] option:eq(1)').text(); | |
| $('#result').append("<div style='background: " + option2 + ";'>" + option2 + "</div>"); // prints 'Green' | |
| var option3 = $('select[name=group]').find('option[value="2"]').text(); | |
| $('#result').append("<div style='background: " + option3 + ";'>" + option3 + "</div>"); // prints 'White' | |
| var option4 = $('select[name=group] option[value="3"]').text(); | |
| $('#result').append("<div style='background: " + option4 + ";'>" + option4 + "</div>"); // prints Black | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment