JavaScript-如何將最后提交的值保留在選擇框中（動態生成的選擇框）

Question

您可以幫忙（或為我指明正確的方向）以修改以下代碼嗎？ 提交表單后，我想將值保留在第二個選擇框中（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>

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']變量傳遞給函數以將其設置為默認值。