使用 javascript 动态创建选择输入，不显示下拉菜单答案

【问题标题】：Dynamically created select input using javascript, not showing dropdown使用 javascript 动态创建选择输入，不显示下拉菜单
【发布时间】：2018-11-29 14:01:15
【问题描述】：

我使用 javascript 创建了一个带有下拉菜单的选择输入字段，因此用户可以添加多个条目，但 javascript 不会拉入用于创建选择下拉列表值的 php 函数。我不明白为什么下拉菜单不起作用。如果我使用 php 创建输入字段，下拉菜单确实可以正常工作。

Javascript

<script>
var count = 0;
$(document).ready(function(){
  $(document).on('click', '.add', function(){
 var html = '';
 html += '<label for="category" class="col-sm-4 control-label">Business Category:</label>';
 html += '<div class="col-sm-8">';
 html += '<select name="category" class="form-control">';
 html += '<option value=""></option><?php categoryDropDown($categories); ?>';
 html += '</select>';
 html += '<button type="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>

PHP 函数

        $categories = $db->select("categories", "deleted = 0 ORDER BY name");
    function categoryDropDown($categories)
        {
            foreach($categories as $p)
            {
                $output3 .= '<option value="' . $p['id'] . '">' . stripslashes($p['name']) . '</option>';
            }
        return $output3 ;
        }

【问题讨论】：

JS 在这一点上还没有访问浏览器@IncredibleHat。标记中仍然显示 PHP 代码
所以，你说：“javascript 没有引入 php 函数”......然后你说“如果我创建下拉菜单确实可以正常工作使用 php 的输入字段。" ...我很困惑你想要做什么或期望什么。 1）JS不能直接调用php函数。 2）您的代码缺少让 PHP 首先正确创建 html 的回声。所以……？？？
我已包含以下内容。 <script src="<a%20href=" https: rel="nofollow" target="_blank">ajax.googleapis.com/ajax/libs/jquery/3.1.0/…></script>
我已经使用普通的 php 输入字段测试了下拉菜单的工作原理，所以我知道 php 函数正在工作。我希望我的用户在单击显示添加类别的按钮时能够创建无限的类别输入字段。除了下拉菜单不起作用外，所有这些都可以在 javascript 上正常工作。我正在尝试回显 php 函数，但它不起作用。如果您查看我的 javascript，您会看到我正在尝试使用

标签： javascript php input dynamic html-select

【解决方案1】：

只是echo 结果。你忘了！ :-P

<?php categoryDropDown($categories); ?>

到

<?= categoryDropDown($categories); ?>

【讨论】：

当我将更改为 = ......?> 然后我的 javascript 失败，甚至没有创建它正在执行的新输入字段之前，但只是没有下拉菜单。
<?= 只是 <?php echo 的简写
生成的html是什么样子的？
Generate HTML 会在选择按钮添加新输入字段但下拉菜单不起作用时创建一个新的输入 html-select 字段。当我进行您建议的更改时，添加新输入字段按钮根本不起作用

【解决方案2】：

尝试将 PHP 变量放入 Javascript 变量中，然后像下面这样附加该 JS 变量：

<script>
    var count = 0;
    $(document).ready(function(){
        $(document).on('click', '.add', function(){
            var options = '<?php echo categoryDropDown($categories); ?>';
            var html = '';
            html += '<label for="category" class="col-sm-4 control-label">Business Category:</label>';
            html += '<div class="col-sm-8">';
            html += '<select name="category" class="form-control">';
            html += '<option value=""></option>';
            html += options;
            html += '</select>';
            html += '<button type="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>

【讨论】：

我尝试了您的建议，但此更改导致 javascript 失败，它根本没有创建新的输入字段，而之前它做得很好。