Question

您可以帮助（或指向正确的方向）以修改以下代码吗？提交表单后，我想在第二个选择框（id =＆＃34; detail＆＃34;）中保留价值。如您所见，第二个框是通过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>

Answer 1

由于您是动态生成选项，因此在提交表单后，选项甚至不存在。所以我认为你应该在页面加载时调用该函数一次。

此外，您必须为创建选项的函数指定应将其设置为所选的默认值。

以下是我建议的更改：

<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']变量传递给函数以将其设置为默认值。

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

1 个答案: