選擇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(); };