Javascript选择，从名称中获取值

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();

我会发布我尝试过的内容，但我什至不确定从哪里开始，而且我确信这已经完成，然后我必须在我的搜索中向谷歌询问错误的问题，所以我还没有找到这方面的任何资源。对于实现这一目标的最佳方式的任何帮助，我们将不胜感激。谢谢！

Answer 1

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

    <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>

像这样在 JavaScript 中获取价格：

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

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

演示：jsfiddle.net/BDGWR/1

顺便说一句，使用 jQuery 确实可以减少您必须编写的代码量，并且在需要 unobtrusive design 时尤其有用，就像您的情况一样。

jQuery 演示：jsfiddle.net/BDGWR/2