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(); };功能中：
```
{{1}}
```

选择Box选项不断变化

2 个答案: