w3resource

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.



Become a Patron!

Follow us on Facebook and Twitter for latest update.

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