CODEWITHSUNDEEP
javascriptjqueryhtmlcss
gooser
gooser

Reputation: 306

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/

Upvotes: 2

Views: 111

Answers (2)

rjreed
rjreed

Reputation: 236

Ok, here's a start.

JS Fiddle Example

If I'm reading your post correctly, it looks like you want to change how all the html displays without actually modifying the html.

Here's is a simple fiddle to show a method of adding/ removing those elements. All I'm doing is using a forEach function to iterate over a sliced array of the option elems and make new div elems, and then I use event delegation to listen for clicks to those new divs. I used vanilla JS - you don't really need to use jQuery for this kind of thing, but if you want to it's pretty much the same idea (just using $ selectors and $(foo).on('click'... instead).

The display isn't perfect, so you will want to mess around with that, but it should get you going.

Upvotes: 2

KyleMit
KyleMit

Reputation: 29937

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:

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"));
});

Upvotes: 2

Related Questions