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

Question

I have a select box with 7.000 itens in my WordPress, and I'd like that the options are only loaded after the user click, due to performance issues. I have no idea how to do it, because the code that generates the options I have is a mix of HTML and 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>

The main function that I included in my functions.php file can be found here. How can load the options after the user click?

Answer 1

Once the PHP script has run it sends the output to the client machine. So you can't call the function when the client clicks unless you use an AJAX call to another file.

So you need to move the function to it's own file. Maybe:

get-select-options.php

Put your function in there and then the call to that function at the top as an echo:

<?php

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

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

In your main file you can create a ajax call to get the results. Use JQuery

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

I would add in a loading animation so the user knows to wait.

If you need to pass parameters to the function you can do so inside the ajax call:

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

and then in the PHP file you can use $_GET to retrieve the paramters

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

EDIT:

You could also populate a variable in JS with the PHP output on the same page and then update the select options on click.

Important The output of the "dropdown-tag-cloud" function must be a string for the way I have it written to work: (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>