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

Question

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

我有一个简单的 jQuery 脚本，它可以获取价格(数据价格)并计算他们选择的选项。那很好用；但是，假设在他们选择选项作为摘要后，将文本信息放在其正上方并将其添加到摘要中。

我对 jquery 不是很好，我试着把它当作一个 fiddle ，但不管出于什么原因，我根本无法让它工作，所以希望这就足够了。

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 来修复此问题