jquery在选择中获取选定选项的标签答案

【问题标题】：jquery getting a tag of selected option in selectjquery在选择中获取选定选项的标签
【发布时间】：2014-04-13 17:45:03
【问题描述】：

我已经搜索了很多简单的东西，但我找不到解决方案。如何在 jquery 中获取所选选项的价格？...假设

<select id="combo">
    <option value="1" price="22">Soap</option>
    <option value="2" price="24">Milk</option>
</select>

我知道如何获取价值和名称...但是价格？

提前谢谢..

谢谢.. 已解决...如果有人需要...如何在选择中计算价格折扣...带小数。

HTML

<div class="row">
    <div class="col-md-4 form-group">
        <label>Variedad</label>
        <div class="controls">
            <select class="form-control cambio" id="variedad" name="variedad_id">
                <option value="4" data-precio="40.00">Plata</option>
                <option value="1" data-precio="10.00">Oro</option>
                <option value="3" data-precio="30.00">Cobre</option>
                <option value="2" data-precio="20.00">Platino</option>
            </select>
        </div>
    </div>
    <div class="col-md-2 form-group">
        <label>Precio Gramo</label>
        <div class="controls">
            <span class="form-control" id="precio">20.00</span>
        </div>
    </div>

    <div class="col-md-2 form-group">
        <label>Peso</label>
        <div class="controls">
            <input class="form-control cambio" name="peso" type="number" id="peso">
        </div>
    </div>
    <div class="col-md-2 form-group">
        <label>Descuento</label>
        <div class="controls">
            <span class="form-control" id="descuento">0</span>
        </div>
    </div>
    <div class="col-md-2 form-group">
        <label>Total</label>
        <div class="controls">
            <span class="form-control" id="total">10.00 €</span>
        </div>
    </div>
</div>

JQUERY

$(document).ready(function () {
   $('select#variedad').on('change', function () {
        var precio = $('option', '#variedad').filter(':selected').data('precio');
        $('span#precio').html( precio );
    });

    $('.cambio').bind( "change keyup", function() {
        var precio = document.getElementById('precio').innerHTML;
        precio = parseFloat(precio);

        var descuento = document.getElementById('descuento').innerHTML;
        descuento = parseFloat(descuento);

        var peso = parseFloat($('input#peso').val());

        var total = (precio*peso) - ( ( ( precio * peso ) * descuento ) / 100 )
        total = (total).toFixed(2);
        $('span#total').html(total + ' €');

    });

【问题讨论】：

标签： jquery select tags option

【解决方案1】：

$('option', '#combo').filter(':selected').attr('price');

但是，在这种情况下，您可能希望使用 data-price 作为属性

$('option', '#combo').filter(':selected').data('price');

【讨论】：

谢谢亚当...但是如何使用它？...像这样？ $("#combo").on('change', function () { var priceVal = $('option','#combo").filter(':selected').data('price').val( ); });
我的答案中的代码简单地返回了价格，所以是的，把它放在一个变量中，然后用它做任何你想做的事情！但看起来你已经从编辑的答案中修复了它？

【解决方案2】：

$("#combo option:selected" ).attr("price");

它会重新计算价格。

例如：如果您在组合框中选择肥皂，它会将价格返回为“22”。

【讨论】：