Dynamically Created Select Input Using Javascript, Not Showing Dropdown

I have created a select input field with dropdown using javascript so user can add multiple entries but the javascript does not pull in the php function used to create the select d

Solution 1:

Try putting the PHP variable inside a Javascript variable and then append that JS variable like below:

<script>var count = 0;
    $(document).ready(function(){
        $(document).on('click', '.add', function(){
            var options = '<?phpecho categoryDropDown($categories); ?>';
            var html = '';
            html += '<labelfor="category"class="col-sm-4 control-label">Business Category:</label>';
            html += '<divclass="col-sm-8">';
            html += '<selectname="category"class="form-control">';
            html += '<optionvalue=""></option>';
            html += options;
            html += '</select>';
            html += '<buttontype="button"name="remove"class="w3-button w3-red w3-round w3-tiny remove"title="Remove this category"></button>';
            html += '</div>';

            $('#category').append(html) ; 
            count++;
        });

        $(document).on('click', '.remove', function(){
            $(this).closest('div').remove();
            count--;
        });
    });
</script>

Solution 2:

Just echo the result. You forgot! :-P

<?php categoryDropDown($categories); ?>

to

<?= categoryDropDown($categories); ?>