Dropdown select extended options - html

Question

Im trying to make a dropdown. U have to search on the package number and you will get the detailed information so you can immediately see the correct price or sizes for that package.
<div class="choosePackage">
<label>
<span>Package nr</span>
<span>m3</span>
<span>Size LxWxH</span>
<span>Price</span>
<span>Discount</span>
</label>
<select>
<option value="">
<span class="optPackage"><strong>5528</strong></span>
<span class="optM3">9m3</span>
<span class="optLWH">1.00x2.00x3.40m</span>
<span class="optPrice">€70,00</span>
<span class="optDiscount">€280,00</span>
</option>
</select>
</div>
I made something like this, but you can't split the option.
This is what I want to achieve

Answer 1

I was working on a solution, but have to run into a meeting. This should give you a basic idea however. Basically, you need to use JS to overlay a styled dropdown which will be linked to the actual drop down. Then you can style things to be different with in each option.
Start by creating your drop down select
You will want to make all the text as a single drop down
<select id="selectbox1">
<option value="">Select an option…</option>
<option value="basic">$100 Basic Package 3 Months</option>
<option value="upgraded">$500 Upgraded Package 6 Months</option>
<option value="expert">$1000 Expert Package 12 Months</option>
</select>
Then you theoretically, jump through hoops using Javascript
Here you will need to cache your options, then hide the select to show your styled div.
// Cache the number of options
var $this = $(this),
numberOfOptions = $(this).children('option').length;
// Hides the select element
$this.addClass('s-hidden');
// Wrap the select element in a div
$this.wrap('<div class="select"></div>');
// Insert a styled div to sit over the top of the hidden select element
$this.after('<div class="styledSelect"></div>');
// Cache the styled div
var $styledSelect = $this.next('div.styledSelect');
// Show the first select option in the styled div
$styledSelect.text($this.children('option').eq(0).text());
Now you will want to cache your styled div, and append some child elements into your div
// Cache the styled div
var $styledSelect = $this.next('div.styledSelect');
// Show the first select option in the styled div
$styledSelect.text($this.children('option').eq(0).text());
// Insert an unordered list after the styled div and also cache the list
var $list = $('<ul />', {
'class': 'options'
}).insertAfter($styledSelect);
// Insert a list item into the unordered list for each select option
for (var i = 0; i < numberOfOptions; i++) {
$('<li />', {
html: $this.children('option').eq(i).text()
.split(' ').join(' <span style="color: red; font-weight:100;">'),
rel: $this.children('option').eq(i).val()
}).appendTo($list);
}
// Cache the list items
var $listItems = $list.children('li');
You will want to use your for loop to append styling onto certain parts of your drop down. I have a basic mock up for you to check out as well.