<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
link
rel
=
"stylesheet"
href="
<
script
src="
</
script
>
<
script
src="
</
script
>
<
script
src="
</
script
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
h1
class
=
"pt-3 text-success font-weight-bold text-center"
>
GeeksforGeeks
</
h1
>
<
div
class
=
"m-3 dropdown"
>
<
button
type
=
"button"
class
=
"btn btn-primary dropdown-toggle"
data-toggle
=
"dropdown"
>
Alert Menu
</
button
>
<
div
class
=
"dropdown-menu"
>
<
a
class
=
"dropdown-item"
href
=
"#"
>Success</
a
>
<
a
class
=
"dropdown-item"
href
=
"#"
>Warning</
a
>
<
a
class
=
"dropdown-item"
href
=
"#"
>Danger</
a
>
</
div
>
</
div
>
<
p
id
=
"alert"
class
=
"alert alert-dismissible"
>
<
button
type
=
"button"
class
=
"close"
data-dismiss
=
"alert"
>×
</
button
><
i
id
=
"demo"
></
i
> Alert ! ...</
p
>
</
div
>
<
script
>
$("a").click(function() {
// removeClass active of previously selected menu item
$('a.dropdown-item.active').removeClass("active");
// Add class active to current selected menu item
$(this).addClass("active");
// Getting text from within selected elements
var msg = $('a.dropdown-item.active').text();
// If condition to check selected alert message
if (msg == "Success") {
$("#alert").removeClass("alert-warning");
$("#alert").removeClass("alert-danger");
$("#alert").addClass("alert-success");
} else if (msg == "Warning") {
$("#alert").removeClass("alert-success");
$("#alert").removeClass("alert-danger");
$("#alert").addClass("alert-warning");
} else {
$("#alert").removeClass("alert-success");
$("#alert").removeClass("alert-warning");
$("#alert").addClass("alert-danger");
}
var str = "";
$(".active").each(function() {
// Using html() to append html data
str += $(this).html() + " ";
});
$("#demo").html(str);
}).click();
</
script
>
</
body
>
</
html
>