2

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

我有一个简单的 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">▾&lt;/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？

4

1 回答 1

0

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

于 2013-10-13T21:50:29.580 回答