Javascript 从HTML5表单的下拉列表中指定数值

尝试从“房间类型”下拉列表中转换要在表单oninput公式中使用的值。然而，我没有找到任何地方详细说明选择框的结构

<form oninput="total.value = (nights.valueAsNumber * rmtp.valueAsNumber) + 
     ((guests.valueAsNumber) * 10)">
        <TABLE class="Internal Info" align="center">
    <TR>
    <TD><label>Full name:</label></TD>
    <TD><input type="text" id="full_name" name="full_name" placeholder="Jane Doe" required></TD>
    </TR>
    <TR><TD>
      <label>Email address:</label></TD>
    <TD>  <input type="email" id="email_addr" name="email_addr" required></TD></TR>
    <TR>
      <TD><label>Repeat email address:</label></TD>
      <TD><input type="email" id="email_addr_repeat" name="email_addr_repeat" required 
       oninput="check(this)"></TD>
    </TR>
      <TR><TD><label>Arrival date:</label></TD>
    <TD>  <input type="date" id="arrival_dt" name="arrival_dt" required></TD></TR>
    <TR>
      <TD><label>Number of nights :</label></TD>
      <TD><input type="number" id="nights" name="nights" value="1" min="1" max="30" required></TD>
    </TR>
    <TR>
      <TD><label>Room Type</label></TD>
      <TD><select name="rmtp" required>
      <option value="80">Standard($80/N)</option>
      <option value="90">Superior($90/N)</option>
      <option value="110">Deluxe($110/N)</option>
      <option value="130">Family($130/N)</option>
      <option value="120">Riviera Suite($120/N)</option>
      <option value="199">Honeymoon Package($199/N)</option>
      </select>

      </TD>
    </TR>
      <TR><TD><label>Number of additional guests (two guests included at the base price; each additional guest adds $10.00 per night):</label></TD>
      <TD><input type="number" id="guests" name="guests" value="0" min="0" max="4" required></TD></TR>
    <TR>
      <TD><label>Estimated total:</label></TD>
    <TD>  $<output id="total" name="total">80</output>.00</TD>
      </TR>
      <TR>
      <TD><label>Promo code:</label></TD>
      <TD><input type="text" id="promo" name="promo" pattern="[A-Za-z0-9]{6}" 
       title="Promo codes consist of 6 alphanumeric characters."></TD></TR></TABLE>
    <br />
    </form>

    <script>
    function check(input) {
      if (input.value != document.getElementById('email_addr').value) {
        input.setCustomValidity('The two email addresses must match.');
      } else {
        // input is valid -- reset the error message
        input.setCustomValidity('');
      }
    }
    </script>

全名：
电邮地址：
重复电子邮件地址：
抵达日期：
夜数：
房间类型
标准（$80/N）
高级（$90/N）
豪华型（$110/N）
家庭（130美元/N）
里维埃拉套房（120美元/套）
蜜月套餐（$199/N）
额外客人数量（底价包括两位客人；每增加一位客人每晚增加10.00美元）：
估计总数：
$80.00
促销代码：


功能检查（输入）{
if（input.value！=document.getElementById（'email\u addr'）.value）{
input.setCustomValidity（'两个电子邮件地址必须匹配'）；
}否则{
//输入有效--重置错误消息
input.setCustomValidity（“”）；
}
}

将您的

oninput

更改为

total.value=（parseInt（nights.value）*parseInt（rmtp.value））+（（parseInt（guests.value））*10）

---

并非所有浏览器都支持

.valueAsNumber

。在页面的中间位置查看浏览器支持表：。该页面通常给出了一些关于

oninput

和

output

元素的好例子。

。工作得很有魅力。然而，出现了一个新问题。在更改另一个变量之前，下拉框不会更新方程式。换言之，如果我选择了不同的房间，估计的数量将保持不变，直到我改变了住宿或客人数量。我不知道为什么select没有触发oninput事件。您可能希望查看其他事件（onchange等），看看是否可以模拟oninput的行为。