Question

如何从以下html的多个下拉列表中获取值并编写javascript。

<label for="select"></label>
<select name="select" id="select">
    <option value="1">p1-$10</option>
    <option value="2">p2-$20</option>
    <option value="3">p3-$30</option>
</select>
<select name="select2" id="select2">
    <option value="a">$10-a</option>
    <option value="b">$20-b</option>
    <option value="c">$30-c</option>
</select>

金额 - $ 75.00 +选择选项

我希望在下拉选项中更改75.00的值。请帮忙

Answer 1

要获取值，您可以使用change()个事件。我在您的选择中看到，您拥有的值是字母，我会考虑将它们更改为实际选择文本的数值，然后您可以这样做：

$("#select, #select2").change(function() {
    alert(this.value);
});

如果你想添加它们，你可以这样做：

var total = 0;
$("#select, #select2").change(function() {
    total += parseInt(this.value);
    alert(total);
});

Answer 2

这是我的出价（example）：

// here's the $75 you referenced
var basePrice = 75.00;

// our calculate function (so it can be called on page load and when they change
// their selection from the drop-downs.
function calculate(){
    // begin tallying price
    var price = basePrice;
    // go through each select list
    $('select').each(function(){
        // grab the selected option's text, then try to extact the
        // price from within (e.g. look for "$xx.xx")
        var sel = $(':selected',this).text(),
            itemprice = parseFloat(sel.match(/\$(\d+(?:\.\d{1.2})?)/)[1], 10);
        price += itemprice;
        // add it to running total
    });
    // now display the result back on the page.
    $('#price').text(price.toFixed(2));
}
// when the select changes, recalculate
$('select').change(calculate);
// also calculate when the page loads.
calculate();

附录：我建议您不要试图从项目的文本中获取价格，而是使用value=""字段（如果可以的话，虽然它可以引用该项目的数据库ID），否则，使用data-* attributes。一个例子就是......

对您的商品进行一些更改（例如）

<option value="1" data-price="10.00">p1-$10</option>

然后改变剧本：

//var sel = $(':selected',this).text(),
//        itemprice = parseFloat(sel.match(/\$(\d+(?:\.\d{1.2})?)/)[1], 10);
var itemprice = $(':selected',this).data('price');

jquery多选框值共享

2 个答案: