Question

我有2个下拉列表，如下所示；

<div class="form-group">
<label>Category</label>
<select class="form-control bg-dark btn-dark text-white" id="drpcategory" name="drpcategory" onchange="submit()" required>
<?php
$category = ''.$dir.'/template/post/category.txt';
$category = file($category, FILE_IGNORE_NEW_LINES);

foreach($category as $category)
{
echo "<option value='".$category."'>$category</option>";
}
?>
</select>
</div>

<div class="form-group">
<label>Item</label>
<select class="form-control bg-dark btn-dark text-white" id="drpitem" name="drpitem">
<?php
$category = $_POST['drpcategory'];
$item = ''.$dir.'/template/post/'.$category.'/item.txt';
$item = file($item, FILE_IGNORE_NEW_LINES);

foreach($item as $item)
{
echo "<option value='".$item."'>$item</option>";
}
?>
</select>
</div>

根据drpitem下拉列表的选择填充drpcategory下拉列表。目前，我可以通过$category在drpitem中捕获$_POST['drpcategory']变量，并且它可以工作。但是问题是我在submit()中的onchange事件中使用了drpcategory函数，因此整个页面只是简单地重新加载，然后按预期填充drpitem。这使drpcategory重设为默认选择，因为它不记得重新加载页面之前的值。

如何在不重新加载页面的情况下捕获$_POST['drpcategory']中的drpitem？我试图坚持使用PHP，并在需要时使用最少的JavaScript。

此问题后来得到更新，并在此处回答： AJAX POST & PHP POST In Same Page

Answer 1

一旦知道了至关重要的信息，它就非常简单，毫无疑问，您可以找到chained select using ajax的其他示例，但是未经测试的示例可能是有用/有趣的。

在这种情况下，change事件将ajax请求激发到相同的php页面-脚本顶部的php处理此POST请求，并使用POST数据构建指向下一个菜单源文件的路径

<?php
    /* top of same page to the javascript/html */
    if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_POST['drpcategory'] ) ){
        ob_clean();

        $category=$_POST['drpcategory'];
        $path=$dir.'/template/post/'.$category.'/item.txt';
        $item = file($path, FILE_IGNORE_NEW_LINES);
        foreach( $item as $item ) printf('<option value="%s">%s',$item,$item);

        exit();
    }

?>
<!doctype html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>chained select</title>
        <script>
            const ajax=function( params ){
                let xhr=new XMLHttpRequest();
                with( xhr ){
                    onreadystatechange=function(e){
                        if( this.status==200 && this.readyState==4 ){
                            document.querySelector('select[name="drpitem"]').innerHTML=this.response
                        }                       
                    }
                    open( 'POST', location.href, true );
                    setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                    send( params );
                }
            }

            document.addEventListener('DOMContentLoaded', event=>{
                document.querySelector('select[name="drpcategory"]').addEventListener('change',e=>{
                    e.preventDefault();
                    ajax( 'drpcategory='+e.target.value );
                },false);
            },false );

        </script>
    </head>
    <body>
        <div class="form-group">
            <label>Category</label>
            <select class="form-control bg-dark btn-dark text-white" name="drpcategory" required>
            <?php

                $category = $dir.'/template/post/category.txt';
                $category = file($category, FILE_IGNORE_NEW_LINES);

                foreach($category as $category) {
                    printf('<option value="%s">%s',$category,$category);
                }
            ?>
            </select>
        </div>

        <div class="form-group">
            <label>Item</label>
            <select class="form-control bg-dark btn-dark text-white" name="drpitem"></select>
        </div>
    </body>
</html>

Answer 2

您可以将第一个Dropdown的值放入会话中。

然后在提交后，您只需将第一个下拉值设置为会话中的值即可。

无需更改提交处理

Answer 3

您可以在foreach语句中使用if条件。

foreach($category as $category_item)
{
    if ($_POST['drpcategory'] == $category_item) {
        echo "<option selected value='".$category_item."'>".$category_item."</option>";
    } else {
        echo "<option value='".$category_item."'>".$category_item."</option>";
    }
}

我看到您的foreach语句语法不正确。列表和项目不要使用相同的变量名。

提交而不重新加载页面

3 个答案: