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 <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.
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:
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.
//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:
$(".shipOption").click(function() {
alert("You clicked "+$(this).attr("value"));
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments