在頁面加載（編輯）事件上保留在動態DropDown列表中選擇的值（取決於另一個DD列表）

Question

以下是兩個下拉列表的HTML代碼。 第二個根據第一個中選擇的值填充。

<label>
<span>Mode:</span>
<select id='car' onchange='configureDropDownLists()'>
<option value=''>Choose the Mode of Transport</option>
<option value='Car'>Car</option>
<option value='Plane'>Plane</option>
</select>
</label><br/>

<label>
<span>Choose the preferred company</span>
<select id='company' onchange='getMessage()'>
<option value=''>Choose the Company</option>
</select>
</label><br/>

<p id='message' style='display:'></p>

用於填充第二個DropDown列表的JavaScript代碼：

function configureDropDownLists()
{
var carComp = ['Porsche', 'BMW', 'Merc', 'Audi', 'Hummer'];
var planeComp = ['Boeing', 'BAC', 'BAE', 'GE'];
var ModeVar=document.getElementById('car').value;
switch (ModeVar);
{
case 'Car':
    company.options.length = 1;
    for (i = 0; i < carComp.length; i++)
    {
        createOption(company, carComp[i], carComp[i]);
    }
    break;
case 'Plane':
    company.options.length = 1;
    for (i = 0; i < planeComp.length; i++)
    {
        createOption(company, planeComp[i], planeComp[i]);
    }
    break;
default:
    company.options.length = 1;
break;
}
}

function createOption(comp, text, value)
{
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
comp.options.add(opt);
}

function getMessage()
{
var compVal =document.getElementById('company').value;
document.getElementById('message').innerHTML = 'You selected ' + compVal;
}

頁面如何工作：

一旦用戶選擇了所需的值，並填寫表格中的其他信息（代碼未顯示）; 他點擊了提交按鈕。 下一頁是“確認頁面”，要求用戶進行最后的“提交”或“編輯”。 “編輯”按鈕將用戶帶回上一頁（window.history.back（）），在那里他可以更改其選擇或文本值。

我面臨的問題是

當我再次回到表格時。 除了第二個（動態生成的公司名稱）下拉列表的值之外，我保留所選或寫入的所有內容。

題：

當我遍歷到此頁面進行編輯時，有沒有辦法讓第二個DDl列表保留它的值。

Answer 1

將所選值保存到localStorage ，並在返回時讀取它。

您需要先檢查本地存儲，如果它是空的 - 使用選定的值。

 function saveForm() { localStorage.setItem('selectedMode', document.getElementById('car').value); localStorage.setItem('selectedCompany', document.getElementById('company').value); } function restoreForm() { document.getElementById('car').value = localStorage.getItem('selectedMode'); document.getElementById('company').value = localStorage.getItem('selectedCompany'); } function configureDropDownLists() { var carComp = ['Porsche', 'BMW', 'Merc', 'Audi', 'Hummer']; var planeComp = ['Boeing', 'BAC', 'BAE', 'GE']; var ModeVar; ModeVar = document.getElementById('car').value; switch (ModeVar) { case 'Car': company.options.length = 1; for (i = 0; i < carComp.length; i++) { createOption(company, carComp[i], carComp[i]); } break; case 'Plane': company.options.length = 1; for (i = 0; i < planeComp.length; i++) { createOption(company, planeComp[i], planeComp[i]); } break; default: company.options.length = 1; break; } } function createOption(comp, text, value) { var opt = document.createElement('option'); opt.value = value; opt.text = text; comp.options.add(opt); } function getMessage() { var compVal = document.getElementById('company').value; document.getElementById('message').innerHTML = 'You selected ' + compVal; } 

 <label> <span>Mode:</span> <select id='car' onchange='configureDropDownLists()'> <option value=''>Choose the Mode of Transport</option> <option value='Car'>Car</option> <option value='Plane'>Plane</option> </select> </label> <br/> <label> <span>Choose the preferred company</span> <select id='company' onchange='getMessage()'> <option value=''>Choose the Company</option> </select> </label> <br/> <p id='message' style='display:'></p>