JavaScript-如何在选择框(动态生成的选择框)中保留上次提交的值


JavaScript - how to keep last submitted value in select box (dynamically generated select box)

您能帮我修改以下代码吗?一旦提交表单,我想在第二个选择框(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']变量传递给函数,将其设置为默认值。