我在制作一个酒店预订系统,在酒店预订页里面有个提交表单。
表单中有‘房间单价’‘预订天数’‘房间数’,其中房间单价是个固定的值,预订天数和房间数是个变量,我想计算出整个预订总价。房间单价 X 预订天数 X 房间数 = 总价
<form name="form1" method="post" name="feedback">
<tr>
<td>房间单价:150</td>
<td>房间数:</td>
<td>
<select name="fangjianshu" >
    <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>
</select>  
</td>
<td>预订天数:</td>
<td>
<select name="tianshu" >
    <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>
</select>
</td>
<td>总价:????</td> 
</tr>  
</form>

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <body>
    <table>
    <tr>
    <td>房间单价:<span id="price">150</span></td>
    <td>房间数:</td>
    <td>
    <select name="fangjianshu">
        <option value="1" selected="selected">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>  
    </td>
    <td>预订天数:</td>
    <td>
    <select name="tianshu">
        <option value="1">1</option>
        <option value="2" selected="selected">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
    </td>
    <td>总价:<span id="total"></span></td> 
    </tr>  
    </table>
    <script type="text/javascript">
    (function(){
    var fangjianshu = document.getElementsByName('fangjianshu')[0];
    var tianshu = document.getElementsByName('tianshu')[0];
    var price = parseInt(document.getElementById('price').innerHTML) || 0;
    var total = document.getElementById('total');
    total.innerHTML =price * fangjianshu.options[fangjianshu.selectedIndex].value * tianshu.options[tianshu.selectedIndex].value;
    })();
    </script>
    </body>
    </html>
      

  2.   


    <script>
    function get() {
         var a = document.getElementsByName("fangjianshu").value;
         var b = document.getElementsByName("tianshu").value;
         alert(parseInt(a)*parseInt(b)*150);
         document.getElementById("rs").innerHTML = parseInt(a)*parseInt(b)*150;
    }
    </script>
    <form name="form1" method="post" name="feedback">
    <tr>
    <td>房间单价:150</td>
    <td>房间数:</td>
    <td>
    <select name="fangjianshu" >
        <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>
    </select>  
    </td>
    <td>预订天数:</td>
    <td>
    <select name="tianshu" onchange="get()">
        <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>
    </select>
    </td>
    <td id="rs">总价:????</td> 
    </tr>  
    </form>
      

  3.   

    楼上两位的都可以,我又稍微改进了一下,自动计算  <form name="form1" method="post" name="feedback">
    <tr>
    <td>房间单价:<span id="price">150</span></td>
    <td>房间数:</td>
    <td>
    <select name="fangjianshu" id="fangjianshu" onchange="getTotal() ;">
        <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>
    </select>  
    </td>
    <td>预订天数:</td>
    <td>
    <select name="tianshu"  id="tianshu" onchange="getTotal() ;">
        <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>
    </select>
    </td>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <td>总价:<span id="total">0</span></td> 
    </tr>  
    </form>
    <script language="JavaScript">
    <!-- function getSelectValue(id){ var obj=document.getElementById(id);   
      
    var index=obj.selectedIndex; //序号,取当前选中选项的序号   
      
    return obj.options[index].value;   
    } function getTotal(){ var roomNum = getSelectValue("fangjianshu") ; var bookDays = getSelectValue("tianshu") ; var price = parseInt(document.getElementById('price').innerHTML) document.getElementById("total").innerHTML = roomNum * bookDays * price ;

    }
    getTotal() ;
    //-->
    </script>
      

  4.   

    晕,没写进代码标识里去
      <form name="form1" method="post" name="feedback">
    <tr>
    <td>房间单价:<span id="price">150</span></td>
    <td>房间数:</td>
    <td>
    <select name="fangjianshu" id="fangjianshu" onchange="getTotal() ;">
        <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>
    </select>  
    </td>
    <td>预订天数:</td>
    <td>
    <select name="tianshu"  id="tianshu" onchange="getTotal() ;">
        <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>
    </select>
    </td>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <td>总价:<span id="total">0</span></td> 
    </tr>  
    </form>
    <script language="JavaScript">
    <!-- function getSelectValue(id){ var obj=document.getElementById(id);   
      
    var index=obj.selectedIndex; //序号,取当前选中选项的序号   
      
    return obj.options[index].value;   
    } function getTotal(){ var roomNum = getSelectValue("fangjianshu") ; var bookDays = getSelectValue("tianshu") ; var price = parseInt(document.getElementById('price').innerHTML) document.getElementById("total").innerHTML = roomNum * bookDays * price ;

    }
    getTotal() ;
    //-->
    </script>