如何通过HTML表单与下拉菜单动态修改dygraphs的CSV文件路径

看起来你已经搭好了数据采集和图表展示的基础框架，只是在把选中的CSV文件名传递给dygraphs时遇到了卡点。我帮你梳理问题并给出修正方案：

先修正代码里的结构问题 #

你的HTML代码存在重复的<head>、<body>标签，还有未闭合的<iframe>标签，这些会导致页面渲染异常，JS代码可能无法正常执行，先把结构理顺。

核心解决：正确将PHP选中的文件名传递给JavaScript #

你之前尝试的$selected_value和'$selected_value'写法都不对——PHP变量需要被正确解析后输出到JS代码中。当表单提交后，我们要在生成dygraphs初始化代码时，把选中的文件名动态替换进去。

完整修正后的代码 #

<html>
<head>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.css" />
</head>
<body>
    <center>
        <!-- 修正iframe的闭合标签与属性 -->
        <iframe width="800" height="600" src="http://SERVER_IP_ADDRESS/graphs.php" frameborder="0" allowfullscreen scrolling="no"></iframe>
    </center>

    <!-- 下拉选择表单 -->
    <form method="post" action="">
        <select name="menu">
            <option selected value="base">Please Select</option>
            <?php
                $filename = 'CSV_index.txt';
                $eachlines = file($filename, FILE_IGNORE_NEW_LINES);
                foreach($eachlines as $lines){
                    // 提交后保留选中状态
                    $selected = (isset($_POST['menu']) && $_POST['menu'] == $lines) ? 'selected' : '';
                    echo "<option value='".$lines."' ".$selected.">".$lines."</option>";
                }
            ?>
        </select>
        <button type="submit" name="submit">Submit</button>
    </form>

    <!-- 图表容器 -->
    <div id="graphdiv2" style="width:700px; height:500px;"></div>

    <script type="text/javascript">
        // 默认加载的CSV文件（可根据需求修改）
        let csvPath = "default.csv";
        <?php
            // 表单提交且选中有效文件时，动态替换路径
            if(isset($_POST["submit"]) && $_POST["menu"] != "base") {
                $selected_value = $_POST["menu"];
                // 用PHP输出JS代码，将文件名包裹为字符串
                echo "csvPath = '".$selected_value."';";
            }
        ?>

        // 初始化dygraphs，使用动态路径
        g2 = new Dygraph(
            document.getElementById("graphdiv2"),
            csvPath,
            {rollPeriod: 7, showRoller: true}
        );
    </script>
</body>
</html>

关键改动说明 #

1. 修复HTML结构：移除重复的<head>、<body>标签，闭合<iframe>的属性与标签，确保页面正常渲染。
2. 保留选中状态：在下拉选项中添加判断逻辑，提交表单后选中的文件会保持高亮，提升用户体验。
3. 正确传递变量：
   • 先定义默认的csvPath变量；
   • 当表单提交且选中有效文件时，PHP输出JS代码修改csvPath的值，用单引号包裹文件名，确保JS识别为合法字符串；
   • dygraphs初始化时直接使用这个动态变量，替代固定的CSV路径。

为什么之前的写法无效？ #

• 直接写$selected_value在JS里，PHP不会解析，JS会把它当成未定义变量；
• 写'$selected_value'的话，JS会把它当成字符串"$selected_value"，而不是PHP变量的实际值；
• 另外你的JS代码之前可能不在表单提交的判断逻辑范围内，导致即使获取到$selected_value也无法传递。

可选优化：无刷新切换图表 #

如果不想每次提交表单刷新页面，可以用AJAX实现无刷新切换：给下拉菜单添加onchange事件，选择变化时用JS直接修改dygraphs的数据源，不过如果你的需求只是表单提交后切换，上面的代码已经足够满足。

内容的提问来源于stack exchange，提问作者albertone74