Skip to content

Instantly share code, notes, and snippets.

@lyonsun

lyonsun/index.html

Created January 22, 2014 07:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lyonsun/8554989 to your computer and use it in GitHub Desktop.
Save lyonsun/8554989 to your computer and use it in GitHub Desktop.
Download ZIP
get innerHTML of option in select element.
Raw
index.html
<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