Question

我正在为订单表单构建动态下拉菜单以获取其他选项。选择后，这些选项会增加动态金额的值。下拉组织如下：

<option value=" . $name . ">" . $name . "</option>

这是通过php然后我回应它。我不知道怎么做的是目前我的javascript被设置为确定通过选项值增加多少值，这使我看到数据库中的数字并且不知道他们订购了什么。所以我想要做的就是让php回显类似于：<option value="Test"> Test - $10 </option>我可以使用javascript来删除10并将其添加到总数中。这是针对多个下拉菜单，目前我的javascript是：

function getDDValue(elementID) {
    var element = document.getElementById(elementID);
    var value;
    // if the element exists
    if (element) {
        value = element.options[element.selectedIndex].value;
    } else {
        value = 0;
    }
    console.log(value);
    return parseFloat(value);
}

function getBase() {
    var value = 0;
    var element = document.getElementById('base_cost');
    value = element.value;
    return parseFloat(value);
}

function getTotal() {
    var optA = getDDValue("optA");
    var quantity = getDDValue("quantity");
    var optB = getDDValue("optB");
    var optC = getDDValue("optC");
    var base_cost = getBase("base_cost")
    var totalPrice = '0';
    totalPrice = parseFloat((+base_cost + +optA + +optB + +optC) * +quantity);
    console.log(totalPrice);
    document.getElementById('totalPrice').innerHTML = "<?php echo $name; ?> $" + totalPrice;
}
getTotal();

我会发布我尝试过的内容，但我不知道从哪里开始，并且我确定在我必须要求google之前已经完成了这个问题，所以我的搜索中出现了错误的问题所以我没有找到任何资源。在实现这一目标的最佳方式上，我们非常感谢您的帮助。谢谢！

Answer 1

您没有正确使用字段，使用输入的最佳方法是：

<select name="Test" id="Test" onChange="getTotal(); or any function">
 <option value="10">Test - 10</option>
</select>

满足您当前的需求：

如果你正在使用JQuery，你可以用“ - ”吐出文本，并过滤第二部分，如$(secondPart).replace(/[^\d.]/g, "");，只获得一个有效数字。

Answer 2

您可以使用自定义属性。

<option value="Test" data-price="10">Test - $10</option>

以这样的价格获取价格：

parseFloat(element.options[element.selectedIndex].getAttribute("data-price"));

您似乎也在使用getDDValue()来阅读所选数量。确保单独留下getDDValue()，这样就不会破坏数量，并创建一个新功能来获得期权价格。

演示：jsfiddle.net/BDGWR/1

BTW，使用jQuery可以真正减少你必须编写的代码量，并且在需要unobtrusive design时特别有用，就像你一样。

jQuery演示：jsfiddle.net/BDGWR/2

Javascript选择，从名称获取价值

2 个答案: