My task was to design a pseudo-select element that showcases columns for each row within the select. Due to HTML's restriction on allowing the <option> tag to include HTML, I had to find an alternate solution.
One issue I encountered was replicating the behavior of a regular select element where it collapses when clicked outside the element, regardless of where the user clicks. Managing this behavior inside the document was simple, but ensuring it works even when clicking in other areas like the address bar or developer/console window proved challenging.
Below is my code snippet along with a functional fiddle demonstration.
<style>
/* CSS styles go here */
</style>
<div id="orderSelectContainer">
<!-- Select Element Container -->
<div id="selectedOrder" class="selectedOrder select-css" style="width: 533px; display: block;">
<!-- Selected Order Displayed Here -->
<div class="currentSelectedOrder" data-value="45628" style="float: left;">
<span style="float:left; min-width:200px;">Store 1</span>
<span style="float:left; min-width:50px"> 55628</span>
<span style="float:left; min-width: 150px;"> Quantity Discrepancy</span>
<span style="float:left; min-width:100px"> </span>
</div>
</div>
<!-- Pseudo-Select Element -->
<div id="orderSelect" class="select-css" style="position: absolute; z-index: 1000; background-image: none; display: none;">
<!– Sample Orders –>
<div class="orderContainer">
<div class="order" data-value="45628" style="float: left; background: white;">
<span style="float:left; min-width:200px;">Store 1</span>
<span style="float:left; min-width:50px"> 55628</span>
<span style="float:left; min-width: 150px;"> Quantity Discrepancy</span>
<span style="float:left; min-width:100px"> </span>
</div>
</div>
<!– Additional Orders –>
<!-- Multiple similar order sections go here -->
</div>
<br style="clear:both"><br>
</div>
<script>
// JavaScript logic goes here
<script>
Fiddle Demo: https://jsfiddle.net/schmidtc63/xu8zgpc9/