动态添加新的下拉菜单 HTML/PHP

Add a new dropdown menu dynamically HTML/PHP

我有一个从文本文件 a 填充的下拉菜单,另外还从同一个文本文件中获取所需的数据。

<?php
$file_handle = fopen("/path/to/a.txt", "rb");
while (!feof($file_handle) ) {
    $line_of_text = fgets($file_handle);
    $parts = explode(',', $line_of_text);
    echo "<option value='".$parts[1]."".$parts[2]."'>".$parts[0]."</option>";
}
fclose($file_handle);
?>
</select>

我需要的是一个额外的下拉菜单,用户可以在其中选择 a.txtb.txt,但在选择 ab 时动态更改其他下拉菜单。

我会使用 jquery/javascript 来执行以下操作:

index.php 将包含用于选择 a 或 b 的初始下拉框。然后将事件绑定到该下拉框 'change' 事件。这将触发一个函数来调用第二个文件 ajax.php,该文件将 return 示例中的文件内容基于 ajax 调用中发送的数据,您将加载到一个空文件中在您的索引页中添加标签。

index.php

<select id='choice'>
<option value='a'>A</option>
<option value='b'>B</option>
</select>
<select id='choice2'></select>
<script>
$(document).ready(function(){
   $('#choice').on('change',null,doFill);
});

function doFill(){
    $.ajax({
        url:'ajax.php',
        type:'post',
        dataType:'html',
        data: { choice: $('#choice').val() },
        success: function(response){
            $('#choice2').html(response);
        }
    });
}
</script>

ajax.php

<?php
$file = "/path/to/a.txt";
if($_POST['choice'] == 'b'){
    $file = "/path/to/b.txt";
}

$file_handle = fopen($file, "rb");
while (!feof($file_handle) ) {
    $line_of_text = fgets($file_handle);
    $parts = explode(',', $line_of_text);
    echo "<option value='".$parts[1]."".$parts[2]."'>".$parts[0]."    </option>";
}
fclose($file_handle);
?>

作为接受答案的替代方法(我认为这是一个好方法),您还可以为 select 元素(或单独的 select 元素预生成替代选项) 在页面加载时使用 PHP,并使用 CSS 隐藏您不希望在初始页面加载时可见的元素。在第一个表单的 selection 操作中,您将根据需要 unhide/hide 第二个下拉元素。如果下拉列表中的项目相对较少,那么这可能是一种更简单的方法,这样在页面加载时下载两个列表不会给 HTML.

添加一堆额外的大小