Question

我有两个选择下拉列表，从分类法类别和子类别中自动填充。我需要用户在从下拉列表中选择后重定向，并提交到该类别或子类别的相关URL。

例如，我的第一个类别是音乐，然后有子弹摇滚和灵魂

如果用户在第一个下拉列表中选择音乐，则第二个下拉列表显示所有音乐＆gt;摇滚＆gt; pop＆gt;灵魂

我需要它，如果他们选择音乐和所有音乐，然后按提交按钮，他们将被导向www.mydomain.com/sections/music/，如果他们选择音乐和摇滚，他们将被导向www.mydomain.com/ sections / music / rock /

每个部分都会继续（即所有电影＆gt;恐怖＆gt;动作＆gt;喜剧等都会转到www.mydomain.com/sections/movies和www.mydomain.com/sections/movies/horror等等。）

我使用此处的代码来显示类别和子类别 - http://wordpress.aspcode.net/view/63538464303732726638577/how-can-i-display-parent-and-child-taxonomies-in-separate-drop-downs

谢谢。

Answer 1

您需要一个ajax控制器，根据所选父项下拉填充子下拉列表。

为此，您需要在前端使用选择侦听器，并使用jQuery加上可能是ajax加载gif的端点。

简单原型：

前端文件：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>title</title>
        <link rel="stylesheet" href="style.css">
        <script src="jquery.js"></script>
    </head>
    <script>
    $(document).ready(function()
    {
        function callEndpointViaAjax( call_url, payload ){
            console.log( call_url );
            console.log( payload );
            return $.ajax({
                url: call_url,
                type: "GET",
                data: payload
            });
        }
        $( '.parent_select' ).change( function() {
            sSelected = $( ".parent_select option:selected" ).text();
            console.log( sSelected );
            oRequest = callEndpointViaAjax( '/play/endpoint.php', { parent: sSelected } );
            oRequest.done(function( sJson ) {
                aData = JSON.parse( sJson );
                aData = aData.child;
                console.log( aData );
                var sel = $('<select>').appendTo('body');
                for ( var prop in aData ) {
                    if(aData.hasOwnProperty(prop)){
                        sel.append($("<option>").attr('value',aData[prop]).text(aData[prop]));
                    }
                }
            });
        });
    });
    </script>
    <body>
    <div class="parent">
        <select class="parent_select">
            <?php
                $aParent = array( 'music', 'food', 'games' );
                $iCountParent = count( $aParent );
                for( $i = 0; $i < $iCountParent; ++$i )
                {
                    echo '<option value="' . $aParent[ $i ] . '">' . $aParent[ $i ] . '</option>';
                }
            ?>
        </select>
    </div>
    </body>
    </body>
</html>

端点文件：

<?php
    $aGet = $_GET;
    $aPost = $_POST;

    if( !empty( $aGet[ 'parent' ] ) )
    {
        if( $aGet[ 'parent' ] == 'music' )
        {
            $aChild = array( 'rock', 'pop', 'rap' );
        }
        else if ( $aGet[ 'parent' ] == 'food' )
        {
            $aChild = array( 'steak', 'salad', 'icecream' );
        }
        else if ( $aGet[ 'parent' ] == 'games' )
        {
            $aChild = array( 'console', 'indie', 'awesome' );
        }
        $aReturn[ 'child' ] = $aChild;
        $sJson = json_encode( $aReturn, 1 );
    }

    // Send it back.
    header( 'Content-type', 'application/json' );
    echo $sJson;
?>

Answer 2

使用javascript或jquery更改表单操作，然后在提交按钮

上提交表单

或

如果您没有使用表单，请动态更改标记href。

动作或href属性值应根据选定的下拉值动态设置。

如何根据选择下拉列表从表单重定向到URL？

2 个答案: