jQuery addClass example

Change class name on click in jQuery

by IanY

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<span id="container" class="ui-front">
	<select id="selectmenu">
		<option selected>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
		<option>Option 4</option>
		<option>Option 5</option>
	</select>
</span>

CSS

p {
  color: white;
  background: red;
}

JavaScript

$('#selectmenu').selectmenu({
	create: function() {
		$('#container')
			.on('mouseenter', function() {
				$('#selectmenu').selectmenu('open');
			})
			.on('mouseleave', function() {
				$('#selectmenu').selectmenu('close');
			});
	},
	select: function() {
		$('body').append('<p>Selected!<p>');
	}
});