html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<title>Get attribute value using attribute</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Leads
<span class="caret"></span></button>
<ul class="dropdown-menu" id="acdp">
<li class="dropdown-header">Websites</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1">Website 1 <span class="caret"></span></a>
<ul class="dropdown-menu clickdp">
<li class="dropdown-header">Lead List</li>
<li><a tabindex="-1" data-value="RL" selected="selected">Rated Lead
<li><a tabindex="-1" data-value="MJL">My Job Lead
</ul>
</li>
</ul>
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
body {
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Leads Dropdown
jQuery(document).ready(function(){
jQuery('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
jQuery('.clickdp li a').click(function () {
jQuery('.clickdp li a').removeAttr("selected", "selected");
jQuery(this).attr("selected", "selected");
alert (jQuery('.clickdp li a[selected="selected"]').data("value"));
});
});
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run