只要页面打开，就保持下拉列表的更新 - keep drop down list updated as long as the page is open

keep drop down list updated as long as the page is open

本文关键字：下拉列表更新 | 更新日期: 2023-09-27

我在PHP页面中有一个下拉菜单，列出了公共目录中的文件。

当用户在此目录中添加或删除文件时，如何保持此列表的更新？

更新的答案

根据注释，下面的HTML代码包含了基本工作示例所需的全部内容。

要测试它，只需将代码复制并粘贴到一个新的HTML文件中，保存更改并将文件放在web服务器上的一个文件夹中，在该文件夹中可以方便地访问它（如"docroot"），然后用web浏览器导航到它。

根据需要更改代码，请注意，包含以下代码中名称的文本文件所使用的文件名为："file.txt"；所以，你可以随意改变。

overrideMimeType方法确保内容是"纯文本"。

这是演示

<html>
    <head>
        <style>
            body
            {
                font-family:Arial,Helvitica,Sans;
            }
            .item
            {
                width:256px;
                padding:0.5em;
                background:#EEE;
                border:1px solid #DDD;
                font-weight:bold;
            }
        </style>
        <script>
            function load(path,call)
            {
                var sock = new XMLHttpRequest();
                sock.open('GET',path);
                sock.overrideMimeType('text/plain; charset=x-user-defined');
                sock.addEventListener
                (
                    'load',function()
                    {
                        call(this.responseText);
                    }
                );
                sock.send();
            }
        </script>
    </head>
    <body>
        <div id="menu">
            <div class="item">demo</div>
        </div>
        <script>
            setInterval
            (
                function()
                {
                    load('file.txt',function(text)
                    {
                        var menu = document.getElementById('menu');
                        var tags = (menu.innerHTML).split('demo');
                        menu.innerHTML = '';
                        (text.split("'n")).forEach(function(file)
                        {
                            menu.innerHTML += (tags[0] + file + tags[1]);
                        });
                    });
                },
                1000; // refresh every 1 second(s)
            );
        </script>
    </body>
</html>

建议

我建议将这个"文本文件"保存为"JSON"，这样你就不需要显式地解析内容，然后你可以将responseType（在"load"函数中）设置为"JSON"，它就会自动解析。

不管怎样，上面的代码应该对你有效，如果需要澄清，请评论。