Convert Select Options to Divs

by Kyle Mitofsky

HTML

<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>
</div>

JavaScript

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

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

//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'>");