Using jQuery to pull info from a dropdown and creating a div with that info

I am running an AB split test that will modify a set of dropdown options for shipping options and creating four div containers with the shipping information inside them. The containers will be side by side boxes that are selectable using a button. I am unable to modify the original html. I need to create this by modifying javaScript and an internal stylesheet.

Here is the html I have to work with:

<div id="carrierCommonDiv">
	<div class="nc_shipping_price_desc">Prices below reflect&nbsp;<span urlPath="/checkout/shipping_policy_popup.jsp?policy=shipping" relativeObj="shippingChargePopup" class="shippingLink3 popLink checkout_popLink">shipping charges</span> for your order.</div>
	<div class="nc_shipping_carrier_select">
		<select id="carrierCode" name="carrierCode">
			<option value="UG" shippingTotal="$13.95" selected="selected" desc="">Standard Ground ( $13.95 )</option>
			<option value="UTS" shippingTotal="$22.45" desc="">Third Day Ground ( $22.45 )</option>
			<option value="US" shippingTotal="$27.45" desc="">Second Day Air ( $27.45 )</option>
			<option value="UNN" shippingTotal="$37.25" desc="">Next Day ( $37.25 )</option>
		</select>
	</div>

Thoughts on how to solve this?

It currently looks like this: http://jsfiddle.net/kBws6/ and should look about like this when completed: http://jsfiddle.net/mMqpG/

This should get you started in jQuery.

Demo in jsFiddle

First, find the select element and save it. Loop through each of it's children. In each loop, you can use $(this) to access all the information you'd need from each option and build some html. Insert it after the select element, and finally hide the original select element:

<!-- language: lang-js -->

var $select = $("#carrierCode");
$select.children("option").each(function() {
    var box = "<div class='shipOption' >"+$(this).text()+"</div>";
    $select.after(box);
});
$select.hide();

---

To add any CSS rules, you should specify the text and then append to the head element. Here's an example of how to do everything in-line, but preferably, you'd create a .css file and link directly to that.

<!-- language: lang-js -->

//TEST
$("head").append("<style type='text/css'>"+
                      ".shipOption {"+
                        "height:150px;"+
                        "width:100px;"+
                        "display:inline-block;"+
                        "border:solid 1px #333;"+
                        "text-align:center;"+
                        "float: left;"+
                      "}"+
                  "</style>");

//PROD
$("head").append("<link rel='stylesheet' type='text/css' href='mystyle.css'>");

---

For click event handling, after you've modified the dom, just setup a listener for click events on anything with the shipOption class:

<!-- language: lang-js -->

$(".shipOption").click(function() {
    alert("You clicked "+$(this).attr("value"));
});