使用HTML/JavaScript价格计算表格下拉菜单

Question

我想要一个下拉菜单来使用价格计算表单，但下拉菜单不会将任何价格值添加到总价格中。我在做这些事情上很不好，所以也许你们中的一个知道如何解决这个问题？

这是link的代码。

HTML：

<form action="" id="theForm"> 
    <fieldset> 
     <legend> 
      Products 
     </legend> 
     <label> 
      <input name="product" value="12.95" type="checkbox" id="p1" onclick="totalIt()"/> 
      Extra domein $12.95 
     </label> 
     <label> 
      <input name="product" value="5.99" type="checkbox" id="p2" onclick="totalIt()"/> 
      Verlengservice $5.99 
     </label> 
     <label> 
      <input name="product" value="1.99" type="checkbox" id="p3" onclick="totalIt()"/> 
      Domein support $1.99 
     </label> 

     <select name="product" id="p3" onclick="totalIt()"/> 
      <option value="249">Thema 'Ambachtelijk'</option> 
      <option value="249">Thema 'Blog - Lifestyle'</option> 
      <option value="199">Thema 'Bed en Brood'</option> 
      <option value="249">Thema 'Freelancer'</option> 
     </select> 

     <label> 
      Total 
      <input value="$0.00" readonly="readonly" type="text" id="total"/> 
     </label> 
    </fieldset> 
    <input value="Submit" type="submit"/> 
    <input value="Reset" type="reset"/> 
</form> 

的JavaScript：

function totalIt() { 
var input = document.getElementsByName("product"); 
var total = 0; 
for (var i = 0; i < input.length; i++) { 
if (input[i].checked) { 
    total += parseFloat(input[i].value); 
} 
} 
document.getElementById("total").value = "$" + total.toFixed(2); 
} 

任何想法？

Answer 1

你需要从<select>

获取选中值，并更改onclick到onchange

当一个元素的值已经更改时发生onchange事件。

试试这个：

if(input[i].tagName == 'SELECT'){ 
    total += Number(input[i].options[input[i].selectedIndex].value); 
} 

function totalIt() { 
 
    var input = document.getElementsByName("product"); 
 
    var total = 0; 
 
    for (var i = 0; i < input.length; i++) { 
 
    if(input[i].tagName == 'SELECT'){ 
 
     total += Number(input[i].options[input[i].selectedIndex].value); 
 
    } 
 
    if (input[i].checked) { 
 
     total += parseFloat(input[i].value); 
 
    } 
 
    } 
 
    document.getElementById("total").value = "$" + total.toFixed(2); 
 
}

<form action="" id="theForm"> 
 
    <fieldset> 
 
     <legend> 
 
      Products 
 
     </legend> 
 
     <label> 
 
      <input name="product" value="12.95" type="checkbox" id="p1" onchange="totalIt()"/> 
 
      Extra domein $12.95 
 
     </label> 
 
     <label> 
 
      <input name="product" value="5.99" type="checkbox" id="p2" onchange="totalIt()"/> 
 
      Verlengservice $5.99 
 
     </label> 
 
     <label> 
 
      <input name="product" value="1.99" type="checkbox" id="p3" onchange="totalIt()"/> 
 
      Domein support $1.99 
 
     </label> 
 

 
     <select name="product" id="p3" onchange="totalIt()"/> 
 
      <option value="249">Thema 'Ambachtelijk'</option> 
 
      <option value="249">Thema 'Blog - Lifestyle'</option> 
 
      <option value="199">Thema 'Bed en Brood'</option> 
 
      <option value="249">Thema 'Freelancer'</option> 
 
     </select> 
 

 
     <label> 
 
      Total 
 
      <input value="$0.00" readonly="readonly" type="text" id="total"/> 
 
     </label> 
 
    </fieldset> 
 
    <input value="Submit" type="submit"/> 
 
    <input value="Reset" type="reset"/> 
 
</form>

Answer 2

对于select事件，您应该使用onchange而不是onclick。主要问题是你没有在totalIt func中增加select的值。从第三个复选框中选择一个不同的ID可能是一个好主意。

Answer 3

你需要修改你的html，你使用的是像p3一样的id。另外，您需要处理onchange事件。请参阅参考代码：

var dropdownTotal = 0; 
 
     function dropDownTotalHandler() { 
 
      var x = document.getElementById("dropdownProducts").value; 
 
         
 
      dropdownTotal += parseFloat(x); 
 
       
 
      document.getElementById("total").value = "$" + dropdownTotal.toFixed(2); 
 
     } 
 
     function totalIt() { 
 
      var input = document.getElementsByName("product"); 
 
      var total = 0; 
 
      for (var i = 0; i < input.length; i++) { 
 
       if (input[i].checked) { 
 
        total += parseFloat(input[i].value); 
 
       } 
 
      } 
 
      document.getElementById("total").value = "$" + total.toFixed(2); 
 
     }

<form action="" id="theForm"> 
 
     <fieldset> 
 
      <legend> 
 
       Products 
 
      </legend> 
 
      <label> 
 
       <input name="product" value="12.95" type="checkbox" id="p1" onclick="totalIt()" /> 
 
       Extra domein $12.95 
 
      </label> 
 
      <label> 
 
       <input name="product" value="5.99" type="checkbox" id="p2" onclick="totalIt()" /> 
 
       Verlengservice $5.99 
 
      </label> 
 
      <label> 
 
       <input name="product" value="1.99" type="checkbox" id="p3" onclick="totalIt()" /> 
 
       Domein support $1.99 
 
      </label> 
 

 
      <select name="product" id="dropdownProducts" onchange="dropDownTotalHandler()" /> 
 
      <option value="249">Thema 'Ambachtelijk'</option> 
 
      <option value="249">Thema 'Blog - Lifestyle'</option> 
 
      <option value="199">Thema 'Bed en Brood'</option> 
 
      <option value="249">Thema 'Freelancer'</option> 
 
      </select> 
 

 
      <label> 
 
       Total 
 
       <input value="$0.00" readonly="readonly" type="text" id="total" /> 
 
      </label> 
 
     </fieldset> 
 
     <input value="Submit" type="submit" /> 
 
     <input value="Reset" type="reset" /> 
 
    </form>

如果你想保持事件处理程序相同，那么这里就是你的方式如何能做到这一个。希望这是你想要的，但如果不是随意改变的话。 首先，将html改为totalIt，如下所示： onchange =“totalIt（this.value）”

然后修改脚本代码。在这里，除了进入总在一个时间发生了一个复选框：

<script> 
var total = 0; 
    function totalIt(dropDownValue) { 
     if (!dropDownValue) { 
      total += parseFloat(event.target.value); 
     } else { 
      total += parseFloat(dropDownValue); 
     } 
     document.getElementById("total").value = "$" + total.toFixed(2); 

    } 

</script> 

看看这是你在找什么？