用变量计算下拉值

时间:2012-08-31 14:09:20

标签: php javascript html

我无法在互联网上的任何地方找到解决方案。 我有一个带有变量“price”的代码和一个包含在下拉列表中的下拉列表。

下拉列表的值为1-40。当价值变化时,总价格应立即改变。与同一行一样,与最终总价格一样。

enter code here



 function calc(){
  one = document.getElementById("price1").childNodes.item(1).childNodes.item(1).value;
  two = parseFloat(document.getElementById("price1").childNodes.item(5).textContent.replace("€",""))
  document.getElementById("price1").childNodes.item(9).textContent =  one * two;
}
<tr id="price1">
        <td><?php include('optie.php');?></td>
        <td><strong>3-gangen traiteurmenu</strong><br>
            (incl. brood en boter)<br>******<br>
            Creme van gerookte paling<br>******<br>
            Gestoofde hertensukade met aardappelgratin, rodekool en een stoofpeertje.<br>******<br>
            Kerstbal van witte en pure chocolade en een vanillesaus.<br><hr>
            </td>
        <td><?php $prijs1= "16.50";?> &euro;<?php  echo $prijs1; ?></td>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&euro;</td>
        <td id="Total"></td> 
    </tr>

我在上面添加了这个代码,这正确地计算了第一个dropdownmenu。但现在,我必须能够做到这一次13,所有的dropdownmenu

我现在知道必须用java来完成,因为那是一种动态语言。

提前感谢!

碧玉

在option.php

下面
porties <select>
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
        <option value="32">32</option>
        <option value="33">33</option>
        <option value="34">34</option>
        <option value="35">35</option>
        <option value="36">36</option>
        <option value="37">37</option>
        <option value="38">38</option>
        <option value="39">39</option>
        <option value="40">40</option>                                            
    </select>

3 个答案:

答案 0 :(得分:2)

PHP 服务器端代码

这意味着,一旦您在浏览器中看到您的网站呈现,它就已经从服务器传送出来,现在是“客户端”。 PHP无法运行客户端。

如果右键单击并查看源代码,您将看到所有PHP代码都已被HTML和纯文本替换。

所以你需要的是一个客户端编程语言,比如Javascript。大多数人不再使用普通的JavaScript。这是因为不同的浏览器以不同的方式解释javascript。最受欢迎的跨浏览器JavaScript库名为jquery

下载jquery,将此代码放在首页,将其包含在您的网站中:

<script type="text/javascript" src="/path/to/jquery.js"></script>

现在你可以编写一些跨浏览器兼容的javascript。

为了做你想做的事,你需要在选择下拉列表中检测“更改”事件。您可以使用jQuery中的change()函数来完成此操作。

这是一个让你顺路的jsfiddle:http://jsfiddle.net/GmC3K/

如果您对jquery有任何疑问,请转回此处! ;)

答案 1 :(得分:1)

您应该使用Javascript来实现这一目标。

将更改事件附加到下拉控件的方法。因此,无论何时更改,显示价格的元素都会更新。

答案 2 :(得分:0)

    function calc(){
  a = document.getElementById("price1").childNodes.item(1).childNodes.item(1).value;
  aa = parseFloat(document.getElementById("price1").childNodes.item(5).textContent.replace("€",""))
  z = document.getElementById("price1").childNodes.item(9).textContent =  Math.round(a * aa *100)/100;

  b = document.getElementById("price2").childNodes.item(1).childNodes.item(1).value;
  bb = parseFloat(document.getElementById("price2").childNodes.item(5).textContent.replace("€",""))
  zz = document.getElementById("price2").childNodes.item(9).textContent =  Math.round(b * bb *100)/100;

  c = document.getElementById("price3").childNodes.item(1).childNodes.item(1).value;
  cc = parseFloat(document.getElementById("price3").childNodes.item(5).textContent.replace("€",""))
  zzz = document.getElementById("price3").childNodes.item(9).textContent =  Math.round(c * cc *100)/100;

  d = document.getElementById("price4").childNodes.item(1).childNodes.item(1).value;
  dd = parseFloat(document.getElementById("price4").childNodes.item(5).textContent.replace("€",""))
  zzzz = document.getElementById("price4").childNodes.item(9).textContent =  Math.round(d * dd *100)/100;

  e = document.getElementById("price5").childNodes.item(1).childNodes.item(1).value;
  ee = parseFloat(document.getElementById("price5").childNodes.item(5).textContent.replace("€",""))
  zzzzzzzzzzz=document.getElementById("price5").childNodes.item(9).textContent =  Math.round(e * ee * 100)/100;

  f = document.getElementById("price6").childNodes.item(1).childNodes.item(1).value;
  ff = parseFloat(document.getElementById("price6").childNodes.item(5).textContent.replace("€",""))
  zzzzz = document.getElementById("price6").childNodes.item(9).textContent =  Math.round(f * ff *100)/100;

  g = document.getElementById("price6").childNodes.item(1).childNodes.item(1).value;
  gg = parseFloat(document.getElementById("price6").childNodes.item(5).textContent.replace("€",""))
  zzzzzzzzzzzz=document.getElementById("price6").childNodes.item(9).textContent =  Math.round(g * gg *100)/100;


  h = document.getElementById("price7").childNodes.item(1).childNodes.item(1).value;
  hh = parseFloat(document.getElementById("price7").childNodes.item(5).textContent.replace("€",""))
  zzzzzz = document.getElementById("price7").childNodes.item(9).textContent =  Math.round(h * hh *100)/100;

  i = document.getElementById("price8").childNodes.item(1).childNodes.item(1).value;
  ii = parseFloat(document.getElementById("price8").childNodes.item(5).textContent.replace("€",""))
  zzzzzzz = document.getElementById("price8").childNodes.item(9).textContent =  Math.round(i * ii *100)/100;

  j = document.getElementById("price9").childNodes.item(1).childNodes.item(1).value;
  jj = parseFloat(document.getElementById("price9").childNodes.item(5).textContent.replace("€",""))
  zzzzzzzz = document.getElementById("price9").childNodes.item(9).textContent =  Math.round(j * jj *100)/100;

  k = document.getElementById("price10").childNodes.item(1).childNodes.item(1).value;
  kk = parseFloat(document.getElementById("price10").childNodes.item(5).textContent.replace("€",""))
  zzzzzzzzz = document.getElementById("price10").childNodes.item(9).textContent =  Math.round(k * kk *100)/100;

  l = document.getElementById("price11").childNodes.item(1).childNodes.item(1).value;
  ll = parseFloat(document.getElementById("price11").childNodes.item(5).textContent.replace("€",""))
  zzzzzzzzzz = document.getElementById("price11").childNodes.item(9).textContent =  Math.round(l * ll *100)/100;

  document.getElementById("total").childNodes.item(9).textContent =  Math.round((z + zz + zzz + zzzz + zzzzz + zzzzzz + zzzzzzz + zzzzzzzz + zzzzzzzzz + zzzzzzzzzz + zzzzzzzzzzz + zzzzzzzzzzzz )*100)/100;

}

也许不是最漂亮的代码,但它有效:)