PHP/Javascript - 根據第一個 Select 元素中的選擇更改第二個 Select 元素，並通過 POST 和頁面重新加載保留選擇

Question

第一個選擇：

<?php

function select_size($itemSizes){

echo "<select id=\"size\" name=\"size\">";

    $sizes = array("0" => "All Sizes","1" => "Large","2" => "Medium","3" => "Small");

    foreach($sizes as $s => $si){
        if($itemSizes == $s){$selected = "selected";}
        echo "<option value=\"" . $s . "\" $selected>" . $si . "</option>\n";
        $selected = "";
    }

echo "</select>\n";

}

?>

第二個選擇：

$(document).ready(function() {

    $("#eventCategory").change(function() {
        var val = $(this).val();
        $("#eventType").html(options[val]);
    });

    var options = ["
        <option value='all_items'>ALL Items</option>
        <option value='red'>red</option>
        <option value='blue'>blue</option>
        <option value='green'>green</option>
    ];

});

由於 PHP，第一個選擇保留值。 onChange工作正常，因為一旦選擇了 Select #1 中的值，Select #2 就會填充它的適當列表。 我遇到的問題是 Select #2 沒有通過 POST 和頁面重新加載保留它的值。 我已經制定了一些 JS 來做到這一點，但它弄亂了onChange函數。 我試圖同時實現這兩個目標，但迄今為止失敗了。 是的，我是 JS 的業余愛好者。 許多其他語言都很好。 語法給我帶來了麻煩。 非常感謝任何幫助。

Answer 1

您可以在第一次選擇觸發onChange事件時發送 ajax。 然后，在此 Ajax 成功后，您可以從 php 獲取值並更改第二個值。 當您使用 ajax 時，第一個選項不會被修改。

當您要求“重新加載頁面”時，您需要在瀏覽器可以呈現的視圖中打印腳本，這可能如下所示：

如果您可以知道每個選項的 ID（如果有）：

echo "<script> $('#selector1 option#'.$idOption.').attr('selected', 'selected'); </script>";

如果您不知道每個的 ID 或有任何要捕獲的 ID，您肯定會得到值，腳本將如下所示：

$('#selector1 option[value="'.$value.'"]').attr("selected", "selected");

在第一種情況下，$idOption 是在第一個選擇器上選擇並從 php 檢索的選項的 ID。 $value 在第二個腳本中是.. 嗯，價值。

不知道是否可以解決您的整個問題，因為我只能看到您的代碼的一部分，如果您提供反饋，我會對其進行編輯。

也許您會使用 var_dump / console.log 值來獲取數據的回溯並查看丟失的位置，以確保圍繞您的功能傳遞所需的數據。