车辆租赁价格计算交互异常：先输时长/切换选项无更新

问题根源 #

1. 原代码给每个<option>绑定click事件，这种方式在部分浏览器中不可靠，切换车辆选项或先输入时长再选车时，事件无法正常触发。
2. 使用document.querySelector("option:checked")获取选中项的方式不够稳定，容易出现获取不到有效选中项的情况。

修复后的完整代码 #

HTML部分（无需修改） #

> *** Dropdown Select-option Vehicle Type ***
<div class="col-md-8 col-sm-8">
<h5><strong>&emsp;Select <c style="color: #880707;">Vehicle</c></strong></h5>
    <select id="name" required>
       <option value="selectVehicle">----- Select Vehicle -----</option>
    <optgroup label="Pick-Up">
       <option value="Light_Truck" id="option_1">Light Truck</option>
    </optgroup>
    <optgroup label="Van">
       <option value="Van" id="option_2">Van (Manual)</option>
    </optgroup>
    <optgroup label="7-Seaters">
       <option value="Innova_AT" id="option_3">Innova (AT)</option>
       <option value="Innova_MT" id="option_4">Innova (Manual)</option>
       <option value="Xpander" id="option_5">Mitsubishi Expander</option>
       <option value="Suzuki_XL7" id="option_6">Suzuki XL7</option>
    </optgroup>
    <optgroup label="Sedan">
       <option value="Vios" id="option_7">Toyota Vios</option>
       <option value="Ciaz" id="option_8">Suzuki Ciaz</option>
       <option value="Mirage_G4" id="option_9">Mirage G4</option>
    </optgroup>
    <optgroup label="Hatchback">
       <option value="Mirage_GLS" id="option_10">Mirage GLS</option>
       <option value="Wigo" id="option_11">Toyota Wigo</option>
    </optgroup>
    </select>
</div>
> *** Days-Weeks-Months Rental Duration Input ***
<div class="col-md-12 col-sm-12">
<h5><strong>&emsp;Rental <c style="color: #880707;">Duration</c></strong></h5>
    <fieldsets>
       <input class="col-md-4" type="text" id="days" name="Days" pattern="\d*" placeholder="Days*"/>
       <input class="col-md-4" type="text" id="weeks" name="Weeks" pattern="\d*" placeholder="Weeks*"/>
       <input class="col-md-4" type="text" id="months" name="Months" pattern="\d*" placeholder="Months*"/>
    </fieldsets>
</div>
> *** Total Cost Output ***
<div class="col-md-6 col-sm-12">
<h5><strong>&emsp;Total <c style="color: #880707;">Cost</c></strong><sup>&emsp;negotiable*</sup></h5>
   <fieldset name="Total">
      <output id="cost"> $ 0.00</output>
   </fieldset>
</div>

JavaScript部分（修复后的代码） #

<script>
const rates={
    option_1:[350,2200,5400],
    option_2:[380,2400,6000],
    option_3:[300,1800,4500],
    option_4:[250,1700,4200],
    option_5:[280,1680,4510],
    option_6:[250,1690,4250],
    option_7:[180,1200,3000],
    option_8:[180,1200,3000],
    option_9:[180,1200,3000],
    option_10:[160,980,2500],
    option_11:[160,980,2500]};
    
const D=[], cost=document.getElementById("cost");
const vehicleSelect = document.getElementById("name");

// 绑定时长输入框的input事件
document.querySelector("fieldsets").querySelectorAll("input").forEach(e=>{
    D.push(e);
    e.addEventListener("input", calc);
});

// 给select绑定change事件，代替原option的click事件
vehicleSelect.addEventListener("change", calc);

function calc(){
    // 从select元素直接获取选中的选项
    const selectedOption = vehicleSelect.options[vehicleSelect.selectedIndex];
    // 获取对应费率，默认空数组转为[0,0,0]
    const r = rates[selectedOption.id] || [0,0,0];
    // 计算总价，空输入转为0，避免NaN
    const total = r.reduce((a,c,i)=>{
        const value = parseInt(D[i].value) || 0;
        return a + c * value;
    }, 0);
    cost.textContent = '$ ' + total.toFixed(2);
}
</script>

关键修改说明 #

1. 事件绑定优化：移除对所有<option>的click事件，改为给<select>元素绑定change事件，确保任何选项切换都会触发计算，兼容所有主流浏览器。
2. 选中项获取优化：通过vehicleSelect.options[vehicleSelect.selectedIndex]直接从下拉框元素获取选中项，避免了通过全局选择器获取元素的不确定性。
3. 输入值处理优化：使用parseInt(D[i].value) || 0将空输入或非数值输入转为0，避免计算出现NaN。

内容的提问来源于stack exchange，提问作者Esper