Javascript 在页面加载（编辑）事件中保留在动态下拉列表（取决于另一个DD列表）中选择的值

以下是两个下拉列表的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>

模式：
选择交通方式
汽车
飞机


选择首选公司
选择公司

填充第二个下拉列表的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;
}

函数配置dropdownlists（）
{
var carComp=[‘保时捷’、‘宝马’、‘美世’、‘奥迪’、‘悍马’]；
var planeComp=[‘波音’、‘BAC’、‘BAE’、‘GE’]；
var ModeVar=document.getElementById（'car'）。值；
开关（ModeVar）；
{
“汽车”案例：
company.options.length=1；
对于（i=0；i

页面的工作方式：

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（）），用户可以在其中更改选择或文本值

我面临的问题是

当我再次回到表格时。除了第二个（动态生成的公司名称）下拉列表的值之外，我选择或编写的所有内容都将保留

问题：

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;
}

是否有一种方法可以使第二个DDl列表在返回到该页面进行编辑时保留其值

将所选值保存到，并在返回时读取

您需要首先检查本地存储，如果是空的，则使用所选值。

函数存储格式（）{
localStorage.setItem（'selectedMode'，document.getElementById（'car'）.value）；
localStorage.setItem（'selectedCompany'，document.getElementById（'company'）.value）；
}
函数restoreForm（）{
document.getElementById（'car'）。value=localStorage.getItem（'selectedMode'）；
document.getElementById（'company'）。value=localStorage.getItem（'selectedCompany'）；
}
函数配置dropdownlists（）{
var carComp=[‘保时捷’、‘宝马’、‘美世’、‘奥迪’、‘悍马’]；
var planeComp=[‘波音’、‘BAC’、‘BAE’、‘GE’]；
var-ModeVar；
ModeVar=document.getElementById（'car'）。值；
开关（ModeVar）{
“汽车”案例：
company.options.length=1；
对于（i=0；i

模式：
选择交通方式
汽车
飞机


选择首选公司
选择公司

您可以展示一个关于如何使用localStorage的小片段吗。我似乎没能成功。我尝试过…@DeVeLoPeR我添加了两个新方法，一个用于保存表单，另一个用于恢复。首先在发送表单时运行，然后在返回页面时运行。我认为它应该可以工作（在snippet中不工作，因为“snippet”的同源策略）。谢谢您的示例。但这对我不起作用。我通过调用te saveForm（）保存了onsubmit表单事件上的值。并尝试通过调用restoreForm（）重置DD value onload事件。似乎对我不起作用。。。还要添加更多细节。所有这些HTML和JS代码都是在C++中的FCGI程序中编写的。如果这有区别的话。。