您能帮我修改以下代码吗?一旦提交表单,我想在第二个选择框(id="detail")中保留值。正如您所看到的,第二个框是通过JavaScript动态生成的。非常感谢。
<form method="get" action="index.php">
<script>
function configureDropDownLists(aa,detail) {
var colours = ['red', 'green'];
var cars = ['audi', 'fiat'];
switch (aa.value) {
case 'colours':
detail.options.length = 0;
for (i = 0; i < colours.length; i++) {
createOption(detail, colours[i], colours[i]);
}
break;
case 'cars':
detail.options.length = 0;
for (i = 0; i < cars.length; i++) {
createOption(detail, cars[i], cars[i]);
}
break;
default:
detail.options.length = 0;
break;
}
}
function createOption(object, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
object.options.add(opt);
}
</script>
<select id="object" name="objects" onchange="configureDropDownLists(this,document.getElementById('detail'))">
<option value=""></option>
<option <?php if ($_GET['objects'] == 'colours') { ?>selected="true" <?php }; ?>value="colours">colours</option>
<option <?php if ($_GET['objects'] == 'cars') { ?>selected="true" <?php }; ?>value="cars">cars</option>
</select>
<select id="detail">
</select>
<input type="submit" value="Submit" class="submit" />
</form>
由于您是动态生成选项的,因此在提交表单后,这些选项甚至不存在。因此,我认为应该在页面加载时调用该函数一次以创建它们。
此外,您必须为创建选项的函数指定默认值,该值应设置为选定值。
以下是我建议的更改:
<form method="get" action="index.php">
<script>
function configureDropDownLists(aa,detail,selected) {
//alert(selected);
var colours = ['red', 'green'];
var cars = ['audi', 'fiat'];
switch (aa.value) {
case 'colours':
detail.options.length = 0;
for (i = 0; i < colours.length; i++) {
createOption(detail, colours[i], colours[i], selected);
}
break;
case 'cars':
detail.options.length = 0;
for (i = 0; i < cars.length; i++) {
createOption(detail, cars[i], cars[i], selected);
}
break;
default:
detail.options.length = 0;
break;
}
}
function createOption(object, text, value, selected) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
opt.selected = (selected == value) ? "selected" : '';
object.options.add(opt);
}
</script>
<select id="object" name="objects" onchange="configureDropDownLists(this,document.getElementById('detail'),'<?php echo isset($_GET['detail']) ? $_GET['detail'] : ''; ?>')">
<option value=""></option>
<option <?php if ($_GET['objects'] == 'colours') { ?>selected="true" <?php }; ?>value="colours">colours</option>
<option <?php if ($_GET['objects'] == 'cars') { ?>selected="true" <?php }; ?>value="cars">cars</option>
</select>
<select id="detail" name="detail">
</select>
<input type="submit" value="Submit" class="submit" />
</form>
<script>
configureDropDownLists(document.getElementById('object'),document.getElementById('detail'),'<?php echo isset($_GET['detail']) ? $_GET['detail'] : ''; ?>')
</script>
请注意我所做的两个更改。我调用了底部的configureDropDownLists
函数,以便在页面加载时动态创建选项。我将$_GET['detail']
变量传递给函数,将其设置为默认值。