选择Box选项不断变化

Question

<Select id="amount" onchange="document.formName.submit(); updateCost();">
   <option id="0" value = "0"> Select amount ... </option>
   <option id="1" value = "2000"> $2000 </option>
   <option id="2" value = "3000"> $3000 </option>
   <option id="3" value = "4000"> $4000 </option>
   <option id="4" value = "5000"> $5000 </option>
</Select>

<Select id="duration" onchange="document.formName.submit(); updateCost();">
   <option id="1" value="2 years"> 2 years </option>
   <option id="2" value="6 years"> 6 years </option>
   <option id="3" value="Lifetime"> Lifetime </option>
</Select>

function updateCost() {      
  var rate = 0;
  if(document.formName.plan[p].checked) {
    if(value('coverageUser').indexOf('Enrolled') > -1){
       rate = getRate();    
    }
    payCycle = 1;
    document.formName.cost.value = formatCurr((rate) * payCycle);
  }    
}

我有这两个选择框，当我从头开始选择一个选项时，成本会正确更新。 但是在选择金额后，我应该从第二个选择框中选择持续时间，默认值为2 years 。 但是当我将值更改为6 years ，成本会更新，但选择框选项不会保留6 years ，但会更改为2 years 。 如何在第二个选择框中保留我选择的选项并正确更新费用？

Answer 1

由于你在onchange()做的提交，选择框不保持状态。 它会在每次更改时导致页面重新加载。 尝试从两个select删除它。

除此之外，你以错误的方式使用id ：你不能在同一个页面中拥有两次相同的id 。 尝试这样的事情：

    <option value="1"> 2 years </option>
    <option value="2"> 6 years </option>
    <option value="3"> Lifetime </option>

Answer 2

在表单提交后返回页面时：

• 使用selected属性标记用户选择的选项：

   <select id="duration"> <option value="2 years"> 2 years </option> <option value="6 years" selected> 6 years </option> <option value="Lifetime"> Lifetime </option> </select> 

• 在页面加载时调用updateCost() ：

   window.onload = updateCost; 

  或者如果你已经有一个，请将它添加到window.onload函数中：

   window.onload = function() { ... updateCost(); };