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

我正在构建一个页面供用户在工作日输入他们的开始时间和结束时间。然后我希望根据他们的选择计算计费时间。不知道这是否可能与JavaScript，因为我已经尝试了一堆不同的代码没有我想要的结果。以下是我目前的位置。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>

来源

2012-12-14 user1882674

你应该包括它做/不做和任何错误。对于初学者来说，它执行onload，它应该在按钮点击或表单提交。你也不能减去那样的时间，你需要创建Date对象。 – MrCode

是的，谢谢。我是新来的这个论坛以及编码，所以非常欣赏这个输入。 – user1882674

不改变你的代码太多了，这里是这个例子： 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 - > 0，下午5:00 - > 480）的分钟数，以便最终计算非常容易。第二件事是当计算时间的函数被调用时。请注意每个select元素的'onChange'属性。这会导致他们在更改时调用'calculateTime'。

在开始编写应用程序之前，我建议学习jQuery。它使这样的事情更容易。

来源

2012-12-14 16:34:43

谢谢，这有很多帮助。 – user1882674

你会介意选择它作为答案吗？ –

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

回答

相关问题