javascript - 单击后如何加载选择下拉菜单项

Question

我的 WordPress 中有一个包含 7.000 个项目的选择框，由于性能问题，我希望这些选项仅在用户单击后加载。我不知道该怎么做，因为生成我拥有的选项的代码是 HTML 和 PHP 的混合。

<select class="chosen" name="tag-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
    <option value="#">Select an artist</option>
    <?php dropdown_tag_cloud('number=0&order=asc'); ?>
</select>

我在functions.php文件中包含的主要函数可以在here中找到。用户点击后如何加载选项？

Answer 1

PHP 脚本运行后，会将输出发送到客户端计算机。因此，当客户端点击时，您无法调用该函数，除非您使用 AJAX 调用另一个文件。

所以您需要将函数移动到它自己的文件中。也许:

get-select-options.php

将您的函数放在那里，然后在顶部调用该函数作为回显:

<?php

     echo dropdown_tag_cloud('number=0&order=asc');

     function tag_cloud($parameters){
         return $stuff;
     }
?>

在主文件中，您可以创建 ajax 调用来获取结果。使用JQuery

<script>
    $('select[name=tag-dropdown]').click(function(){
        $.get('select-options.php', {}, function(r){
            $('select[name=tag-dropdown]').append(r);
        });
    });
</script>

我会添加一个加载动画，以便用户知道要等待。

如果您需要将参数传递给函数，您可以在 ajax 调用中执行此操作:

$.get('select-options.php', {'number':3, 'order':'asc'}, function(r){});

然后在 PHP 文件中您可以使用 $_GET 检索参数

$number = $_GET['number'];
$order = $_GET['order'];

编辑:

您还可以使用同一页面上的 PHP 输出填充 JS 中的变量，然后更新单击时的选择选项。

重要“dropdown-tag-cloud”函数的输出必须是一个字符串，以符合我的编写方式: (example: <option value="asdf">tag</option><option value="qwer">tag</option>)

<script>
    var options = '<?php echo dropdown_tag_cloud(0,"asc")'; ?>;

    $('select[name=tag-dropdown]').click(function(){
        $('select[name=tag-dropdown]').append(options);
    });
</script>