I have multiple divs contained within a wrapper div, each representing the same entity as shown in image 1.
https://i.sstatic.net/iNjqB.jpg
When I click on "Select 1" or "Select 2", I need to trigger a dropdown list that allows me to select an option and change the value of the corresponding Select element. The design of this dropdown list should match the look of the Select div items, as seen in image 2.
https://i.sstatic.net/JfUb2.jpg
I have explored numerous jQuery select plugins without success. Can anyone provide guidance on how to achieve this functionality or recommend a plugin that can help with this task?
The following is the HTML code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8">
<style>
.wrapper
{
width:330px;
overflow:hidden;
border:solid 1px gray;
padding: 3px;
}
.element
{
width:80px;
min-height: 30px;
border:solid 1px black;
background-color: orange;
text-align: center;
line-height: 30px;
}
.float-left
{
float: left;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="element float-left">
Select 1
</div>
<div class="element float-left">
Select 2
</div>
<div class="element float-left">
Select 3
</div>
<div class="element float-left">
Select 4
</div>
</div>
</body>
</html>
Thank you for your assistance.