Following is the HTML code for two Dropdown lists. Second one get populated based on the value selected in the first one.
<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 code to populate the second DropDown list:
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;
}
How the page works:
Once the user selects the desired values, and fills up other information in the form (code not shown); he clicks on the submit button. Next page is the "Confirmation page" that asks user to either do the final "Submit" or "Edit". Edit button takes the user back to the previous page (window.history.back()), where he can change his selections or text values.
The problem I am facing is
When I go back to the form again. Everything I selected or wrote is retained except the value for second (dynamically generated, company names) drop-down list.
Question:
Is there a way I can make the 2nd DDl list to retain it's value when I traverse back to this page to edit.
Aucun commentaire:
Enregistrer un commentaire