使用jQuery從下拉列表中提取信息並使用該信息創建一個div

Question

我正在運行AB拆分測試，該測試將修改一組運輸選項的下拉選項，並創建四個div容器，其中包含運輸信息。 容器將是可以使用按鈕選擇的並排框。 我無法修改原始的html。 我需要通過修改javaScript和內部樣式表來創建它。

這是我必須使用的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>

關於如何解決這個問題的想法？

當前看起來像這樣： http : //jsfiddle.net/kBws6/ ，完成后應該看起來像這樣： http : //jsfiddle.net/mMqpG/

Answer 1

好的，這是一個開始。

JS小提琴示例

如果我正確閱讀了您的帖子，則似乎您想更改所有html的顯示方式，而無需實際修改html。

這是一個簡單的小提琴，用於顯示添加/刪除這些元素的方法。 我正在做的是使用forEach函數遍歷選項元素的切片數組並創建新的div元素，然后使用事件委托偵聽對這些新div的點擊。 我使用了香草JS-您實際上不需要使用jQuery來完成這種事情，但是如果您願意的話，它幾乎是相同的想法（只是使用$選擇器和$(foo).on('click'...代替）。

顯示屏不是完美的，所以您可能會想弄亂它，但是它應該可以助您一臂之力。

Answer 2

這應該使您開始使用jQuery。

jsFiddle中的演示

首先，找到選擇元素並保存。 遍歷每個孩子。 在每個循環中，您可以使用$(this)從每個選項訪問所需的所有信息並構建一些html。 將其插入after的select元素，最后hide原來的選擇元素：

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

---

要添加任何CSS規則 ，應指定文本，然后append到head元素。 這是一個如何在線完成所有操作的示例，但最好是創建一個.css文件並直接鏈接到該文件。

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

---

對於click事件處理 ，在修改dom之后，只需為帶有shipOption類的任何事件的click事件設置偵聽器：

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