Jquery显示/隐藏div区域

Question

我正在尝试在选择菜单上返回PHP数组。

例如：用户选择选择内的性别，现在JS应该调用PHP类来返回一个项目数组。 JS应该将数组中的值添加到另一个选择菜单中。

如果用户现在选择另一个性别，则应再次调用PHP类。

<script type="text/javascript">
    $(document).ready(function(){
        $('#fds_gender').change(function () {
            if ($(this).val() == "stud") {
                <?php
                    require_once('../handling/fds_categorys.php');
                    $fds_stealer = new fds_categorys($user->username, 'stud');
                    $data = $fds_stealer->get_template_categories();
                ?>
            }else if($(this).val() == "babe") {
                <?php
                    require_once('../handling/fds_categorys.php');
                    $fds_stealer = new fds_categorys($user->username, 'babe');
                    $data = $fds_stealer->get_template_categories();
                ?>
            }
        });
    });
</script>

<div class="col-sm-6">
    <label>Categories</label>
    <select name="categorie" data-placeholder="Select a categorie..." class="select-icons">
        <?php foreach($data['categories'] as $categorie): ?>
            <?php echo '<option value="' . $categorie['name'] . '" data-icon="woman">' . $categorie['name'] . '</option>'; ?>
        <?php endforeach; ?>
    </select>
</div>

遗憾的是，选择仅包含else if响应，并且不会在另一个选择上更改。

有谁知道我做错了什么？

Answer 1

PHP在服务器端运行，因此在javascript中需要它，如果/ else只会在启动时加载两次。 （如果检查源代码，则if / else为空）

那说你在这里有两种不同的方法。

第一种方法

服务器端方法是在启动时加载所有内容，并使用不同的数据集组装2个javascript数组。

   <?php
      require_once('../handling/fds_categorys.php');
      $fds_stealer = new fds_categorys($user->username, 'stud');
      $dataStud = array_map(
         function($el){
            return $el['name'];
         },
         $fds_stealer->get_template_categories()
      );
      $fds_stealer = new fds_categorys($user->username, 'babe');
      $dataBabe = array_map(
         function($el){
            return $el['name'];
         },
         $fds_stealer->get_template_categories()
      )
   ?>
   var dataStud = ["<?= implode('"', $dataStud) ?>"];
   var dataBabe = ["<?= implode('"', $dataBabe) ?>"];

现在你有2个带有数据的javascript数组。 在更改时，您将使用jquery来组合您的选择的选项。

第二种方法

使用Ajax调用一个返回JSON数组的文件。 这是一个完整的另一个世界，所以在我给你任何代码之前你必须先研究一下。 但基本上你必须在你的服务器中有一个.php来获取参数（通过$ _GET或$ _POST）并返回一个JSON数组。 在jQuery中调用$ .post或$ .get，在回调函数中，您将填充select的选项。 每次更改选择值时，都会运行$ .get或$ .post调用。

Answer 2

你必须明白 -

<script type="text/javascript">
$(document).ready(function(){
    $('#fds_gender').change(function () {
        if ($(this).val() == "stud") {
            <?php
                require_once('../handling/fds_categorys.php');
                $fds_stealer = new fds_categorys($user->username, 'stud');
                $data = $fds_stealer->get_template_categories();
            ?>
        }else if($(this).val() == "babe") {
            <?php
                require_once('../handling/fds_categorys.php');
                $fds_stealer = new fds_categorys($user->username, 'babe');
                $data = $fds_stealer->get_template_categories();
            ?>
        }
    });
});

下面的PHP脚本将在服务器端进行，服务器不关心javascript和HTML所以这不起作用。

<?php
            require_once('../handling/fds_categorys.php');
            $fds_stealer = new fds_categorys($user->username, 'stud');
            $data = $fds_stealer->get_template_categories();
        ?>

相反，你应该从jquery进行AJAX调用，然后使用jquery方法隐藏/显示div .hide（）。show（）

require_once('../handling/fds_categorys.php');
            $fds_stealer = new fds_categorys($user->username, 'stud');
            $data = $fds_stealer->get_template_categories();

Answer 3

那是因为PHP在页面加载之前被解释，而jQuery在完成之后操纵DOM。

因此，你正在做的事情是行不通的。

您可以将select标记作为表单的一部分，该表单在更改时向PHP页面发出请求，并让PHP执行逻辑（如标准MVC应用程序）并返回值。

然后，使用返回的值，操纵它们以在DOM上进行渲染。

Answer 4

您可以将php结果分配到JS数组中，然后将其转换为选择选项。

var dataJson;

if ($(this).val() == "stud") {
        <?php
            require_once('../handling/fds_categorys.php');
            $fds_stealer = new fds_categorys($user->username, 'stud');
            $data = $fds_stealer->get_template_categories();
            echo 'dataJson = "'.json_encode($data).'"';
        ?>
}
//convert json array into JS array
var dataArray = JSON.parse(dataJson),
    options = '';
//iterate converted array to grab option names
for (var i = 0; i < dataArray.length; i++) {
    options += '<option>'+dataArray[i].name+'</option>';
}
//now populate dropdown with values
$(this).html(options);

Answer 5

作为一个开始...

}else if($(this).val() == "babe") {

......看起来不对劲 你的if应该在括号内。

其次，你的require_once语句将呈现两次，所以这显然不是你想要的。

您需要了解代码的处理顺序，即：

1. 服务器端代码（PHP）
2. 客户端代码（Javascript / jQuery）

如果要在不刷新页面的情况下更新页面，则需要从客户端脚本调用Ajax到服务器上的另一个PHP脚本。

此链接向您展示了从jQuery执行此操作的一种方法。