jQuery: Event to get a text and writes them in a paragraph
jQuery Fundamental - II : Exercise-53
Attaches a change event to the select element (Use to create a drop-down list.) that gets the text for each selected option and writes them in a paragraph.
Sample solution :
HTML Code :
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Attaches a change event to the select element (Use to create a drop-down list.) that gets the text for each selected option and writes them in a paragraph.</title>
</head>
<body>
<select name="colors" multiple="multiple">
<option selected="selected">Red</option>
<option selected="selected">Green</option>
<option>Blue</option>
<option>Orange</option>
<option>Black</option>
<option>White</option>
</select>
<p></p>
</body>
</html>
JavaScript Code :
// A sample function f1
var foo = function( value ) {
console.log( "foo: " + value );
};
var callbacks = $.Callbacks();
$( "select" )
.change(function () {
var str = "";
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
});
$( "p" ).text("Selected Colors: "+str) .css( "color", "blue" );
})
.change();
See the Pen jquery-fundamental-exercise-53 by w3resource (@w3resource) on CodePen.
Contribute your code and comments through Disqus.
Previous: Remove a single callback or a set of callbacks from a callback list.
Next: Finds all checkbox inputs.
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.
https://w3resource.com/jquery-exercises/2/jquery-fundamental-exercise-53.php
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics