Question

我不得不在工作网站上更改一些信息，现在我似乎无法找出我做错了什么。

我有一个简单的jQuery脚本，假设它采取价格（数据价格）并计算他们选择的选项。这很好;但是，假设在它们选择作为摘要的选项之后，将文本信息放在它上面并将其添加到摘要中。

我对jquery并不是很好，我试着将它作为一个小提琴，但无论出于什么原因，我都无法让它工作，所以希望这就足够了。

jquery的

var $selections = $('#selections');
var $selects = $("select").change(function () {
    var total = 0;
    $selections.empty();
    $selects.each(function () {
        var $selected = $(this).find("option:selected");
        var price = parseFloat($selected.data("price")) || 0;
        total += price;
        if($selected.val() !== ''){
            $('<li />', {
                text: $selected.text() + $(this).parent().clone().children().remove().end().text()+" " + $selected.data("price")
            }).appendTo($selections)
        }
    })
    $(".summary").text('Est. Total $' + total);
})

HTML

Areas - Selected:<br />
<select name="rooms" id="Areas"> 
         <option value="">Select Rooms..</option>                           
         <option data-price="5" value='1'>10</option>
 </select>

<h3 class="summary" data-price="0">Est. Total $0</h3>
   <div class="well">
        <h4>Breakdown:</h4>
         <ul id="selections"></ul>
</div>

输出如下：

10 Area - selected: 5

现在看起来像

10 5

因此未选择选择框正上方的文本。我知道这里的代码在这里：

text: $selected.text() + $(this).parent().clone().children().remove().end().text()+" " + $selected.data("price")

我只是不明白它在做什么以及当我从遗留代码中删除div时会如何影响它。

[编辑]

我发现由于将Selectric.js添加到我的下拉列表中，它无法正常工作。这是现在的输出。

        <div class="selectricWrapper"><div class="selectricHideSelect"><select id="Areas" name="rooms"> 
    <option value="">Select Areas</option>                                                      <option value="1" data-price="8.95">1</option>
        <option  value="2"dataprice="17.90">2</option>                                <option value="3" data-price="26.85">3</option>
            <option value="4" data-price="35.80">4</option>                             <option value="5" data-price="39.95">5</option>
<option value="6" data-price="53.70">6</option>
<option value="7" data-price="69.95">8</option>
            </select>
        </div>
        <div class="selectric">
        <p class="label">3</p><b class="button">▾</b>
        </div>
        <div class="selectricItems" style="width: 298px; display: none;">
        <ul>
        <li class="">Select Areas..</li>
        <li class="">1</li>
        <li class="">2</li>
        <li class="selected">3</li>
        <li class="">4</li>
        <li class="">5</li><li class="">6</li>
        <li class="last">8</li>
        </ul>
        </div>

    </div>

我如何更改我的jquery以解决selectric.js？

Answer 1

我通过删除Selectric.js并在每个选择选项之前添加div来修复此问题

如何在选择框上方获取文本？

1 个答案: