Question

我正在构建一个页面，供用户在工作日输入他们的开始和结束时间。然后我希望根据他们的选择来计算可计费小时数。不确定这是否可以使用javascript，因为我尝试了一堆不同的代码而没有我想要的结果。以下是我目前所处的位置。

我是javascript的新手，所以非常感谢您提供的任何输入。

谢谢，安德鲁

<select id="start_time" name="start_time">
         <option value="" selected="selected" disabled>Choose start time</option>
        <option value="09:00:00">9:00 AM</option>
        <option value="09:15:00">9:15 AM</option>
        <option value="09:30:00">9:30 AM</option>
        <option value="09:45:00">9:45 AM</option>
</select>
<br>
<select name="end_time">
         <option value="" selected="selected" disabled>Choose end time</option>
        <option value="17:00:00">5:00 PM</option>
        <option value="17:15:00">5:15 PM</option>
        <option value="17:30:00">5:30 PM</option>
        <option value="17:45:00">5:45 PM</option>
</select>
<br>
<select name="mealbreak" id="mealbreak">
         <option value="" selected="selected" disabled>Did you stop for lunch?</option>
        <option value="00:30:00">Yes, we ate.</option>
        <option value="00:00:00">No meal breaks.</option>
</select>       
<br>
Billable Hours<input type="text" id="billable_hours" name="billable_hours">

<script>
window.onload = function () {
var time1 = document.getElementById("start_time").options[document.getElementById("start_time").selectedIndex].value;
var time2 = document.getElementById("end_time").options[document.getElementById("end_time").selectedIndex].value;
var mealbreak = document.getElementById("mealbreak").options[document.getElementById("mealbreak").selectedIndex].value;
var billable = time2 - time1 - mealbreak;
    billable_hours = document.getElementById('billable_hours');

function () {
    billable_hours.value = billable.value;
  };
};
</script>

Answer 1

在不改变代码的情况下，以下是此示例： http://jsfiddle.net/tEnyP/

<html>
<body>
<select id="start_time" name="start_time" onChange="calculateTime();">
         <option value="" selected="selected" disabled>Choose start time</option>
        <option value="0">9:00 AM</option>
        <option value="15">9:15 AM</option>
        <option value="30">9:30 AM</option>
        <option value="45">9:45 AM</option>
</select>
<br>
<select id="end_time" name="end_time" onChange="calculateTime();">
         <option value="" selected="selected" disabled>Choose end time</option>
        <option value="480">5:00 PM</option>
        <option value="495">5:15 PM</option>
        <option value="510">5:30 PM</option>
        <option value="525">5:45 PM</option>
</select>
<br>
<select name="mealbreak" id="mealbreak" onChange="calculateTime();">
         <option value="" selected="selected" disabled>Did you stop for lunch?</option>
        <option value="30">Yes, we ate.</option>
        <option value="0">No meal breaks.</option>
</select>       
<br>
Billable Hours: <input type="text" id="billable_hours"/>

<script>
function calculateTime() {
    var time1 = document.getElementById("start_time").options[document.getElementById("start_time").selectedIndex].value;
    var time2 = document.getElementById("end_time").options[document.getElementById("end_time").selectedIndex].value;
    var mealbreak = document.getElementById("mealbreak").options[document.getElementById("mealbreak").selectedIndex].value;
    var billable = (time2 - time1 - mealbreak)/60;

    document.getElementById('billable_hours').value = billable; 
};
</script>
</body>
</html>

主要有两个不同之处。首先，我将每个选项的值从最早可能的开始时间（上午9:00 - >下午5:00，下午5:00 - > 480）开始，以使最终计算变得非常容易。第二件事是调用计算时间的函数。请注意每个select元素的'onChange'属性。这会导致他们在更改时调用'calculateTime'。

在进一步编写应用程序之前，我建议学习jQuery。这使得这样的事情变得更容易了。

Javascript获取多个选项值并更新表单字段

1 个答案: