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

【问题标题】：Javascript get multiple option values and update form fieldJavascript获取多个选项值并更新表单字段
【发布时间】：2012-12-14 16:19:14
【问题描述】：

我正在构建一个页面，供用户输入他们在工作日的开始和结束时间。然后我希望根据他们的选择计算计费时间。不确定这是否可以使用 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>

【问题讨论】：

你应该包括它做什么/不做什么以及任何错误。对于初学者，它执行 onload，它应该在按钮单击或表单提交中。你也不能这样减去时间，你需要创建 Date 对象。
好的，谢谢。我是这个论坛和编码的新手，非常感谢您的意见。

标签： javascript forms option

【解决方案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 -> 0、下午 5:00 -> 480）开始的分钟数，以使最终计算变得非常容易。第二件事是何时调用计算时间的函数。请注意每个选择元素的“onChange”属性。这会导致它们在更改时调用“calculateTime”。

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

【讨论】：

谢谢，帮了大忙。