Jquery显示/隐藏div区域

时间:2016-03-01 12:01:20

标签: javascript jquery select

我正在尝试在选择菜单上返回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响应,并且不会更改其他选择。

有没有人知道我做错了什么?

5 个答案:

答案 0 :(得分:3)

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调用。

答案 1 :(得分:1)

你必须明白 -

<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();

答案 2 :(得分:0)

这是因为PHP在页面加载之前被解释,而jQuery在完成之后操作DOM。

因此,你所做的事情是行不通的。

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

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

答案 3 :(得分:0)

您可以将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);

答案 4 :(得分:-1)

首先......

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

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

其次,您的require_once语句将呈现两次,因此这显然不是您想要的。

您需要了解代码的处理顺序,即:

  1. 服务器端代码(PHP)
  2. 客户端代码(Javascript / jQuery)
  3. 如果要在不刷新页面的情况下更新页面,则需要从客户端脚本调用Ajax到服务器上的另一个PHP脚本。

    This link向您展示了一种从jQuery中完成它的方法。