<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<style>
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
</style
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="bold">Scrollable Menu</h2>
<div class="btn-group">
<div class="dropdown">
<button style="max-width: 300px;width: 200px;"class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu scrollable-menu" aria-labelledby="dropdownMenu1">
<li><a href="#" data-value="Nagaraju">Action</a></li>
<li><a href="#" data-value="another action">Another action</a></li>
<li><a href="#" data-value="something else here">Something else here</a></li>
<li><a href="#" data-value="separated link">Separated link</a></li>
<li><a href="#" data-value="action">Action</a></li>
<li><a href="#" data-value="another action">Another action</a></li>
<li><a href="#" data-value="something else here">Something else here</a></li>
<li><a href="#" data-value="separated link">Separated link</a></li>
<li><a href="#" data-value="action">Action</a></li>
<li><a href="#" data-value="another action">Another action</a></li>
<li><a href="#" data-value="something else here">Something else here</a></li>
<li><a href="#" data-value="separated link">Separated link</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$(function() {
$(".dropdown-menu li a").click(function(){
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
console.log($(this).attr('data-value'));
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});
})
</script>
</html>
Wednesday, February 26, 2020
Bootstrap Scroll able Menu and selection of data value and text
Subscribe to:
Post Comments (Atom)
-
Step 1: we have check the installed sbt version . if sbt installed version on out laptop is say : 1.3.13 [info] welcome to sbt 1.3.13 ...
-
OpenVPN 2.4 also became the default version your connections use. OpenVPN 2.4 adds many security and performance improvements. Because OpenV...
-
Follow the below steps . 1. Add the Logger import org.apache.log4j.Logger 2. Add the Level import org.apache.log4j.Level 3.Set the Log Leve...
No comments:
Post a Comment