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執行此操作的一種方法。