tghelere/php_jquery_ajax.php

## php_jquery_ajax.php
<?
    $servers = ['server abc', 'server 123'];

    $jogos_abc = ['1' => 'Jogo a', '2' => 'Jogo y', '3' => 'Jogo 4', '4' => 'Jogo h'];

    $jogos_123 = [
        'a' => 'Game f',
        'b' => 'Game x',
        'c' => 'Game 1',
        'd' => 'Game m'
    ];

    if (isset($_GET['servers'])) {
        $selected_server = $_GET['servers'];
        if ($selected_server == 1) {
            echo json_encode($jogos_abc);
            exit;
        }
        echo json_encode($jogos_123);
        exit;
    }

    if (!empty($_POST)) {
        print_r($_POST);
        exit;
    }
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <style>
            form.formulario { width: 600px; margin: 100px auto 0; }
            p.resultado{ text-align: center;}
            .mt-50 { margin-top: 50px; }
        </style>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
        <script>
            $(() => {
                let servers = $("#servers")
                let jogos = $("#jogos")

                servers.on('change', e => {
                    let server = $(e.target).val()
                    $.ajax({
                        url: '?servers=' + server,
                        type: 'get',
                        dataType: 'json',
                        success: (data) => {
                            let games = []
                            games.push('<option disabled selected value="">Selecione um jogo</option>')
                            $.each(data, function(key, value) {
                                games.push('<option value="' + key + '">' + value + "</option>")
                            })
                            jogos.html(games.join(""))
                        }
                    })
                })

                $('form.formulario').on('submit', e => {
                    e.preventDefault()
                    console.log(servers)
                    if(servers.val() != null && jogos.val() != null){
                        $('p.resultado').html('O servidor que você escolheu foi o <b>' + $('#servers option:selected').text() + ' (' + servers.val() + ')</b>, e o jogo escolhido foi <b>' + $('#jogos option:selected').text() + ' (' + jogos.val() + ')</b>.')
                    }
                })
            })
        </script>
    </head>
    <body>
        <form class="formulario" method="post">
            <div class="form-group">
                <label for="servers">Server</label>
                <select class="form-control" id="servers" name="servers">
                    <option disabled selected value="">Selecione um server</option>
                    <? foreach ($servers as $key => $value) { ?>
                        <option value="<?= $key; ?>"><?= $value; ?></option>
                    <? } ?>
                </select>
            </div>

            <div class="form-group">
                <label for="jogos">Jogos</label>
                <select class="form-control" id="jogos" name="jogos">
                    <option disabled selected value="">Selecione um jogo</option>
                </select>
            </div>

            <button type="submit" class="btn btn-default">Submit</button>
        </form>

        <div class="jumbotron mt-50">
            <p class="resultado"></p>
        </div>
    </body>
</html>
	<?
	$servers = ['server abc', 'server 123'];

	$jogos_abc = ['1' => 'Jogo a', '2' => 'Jogo y', '3' => 'Jogo 4', '4' => 'Jogo h'];

	$jogos_123 = [
	'a' => 'Game f',
	'b' => 'Game x',
	'c' => 'Game 1',
	'd' => 'Game m'
	];

	if (isset($_GET['servers'])) {
	$selected_server = $_GET['servers'];
	if ($selected_server == 1) {
	echo json_encode($jogos_abc);
	exit;
	}
	echo json_encode($jogos_123);
	exit;
	}

	if (!empty($_POST)) {
	print_r($_POST);
	exit;
	}
	?>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<style>
	form.formulario { width: 600px; margin: 100px auto 0; }
	p.resultado{ text-align: center;}
	.mt-50 { margin-top: 50px; }
	</style>
	<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
	<script>
	$(() => {
	let servers = $("#servers")
	let jogos = $("#jogos")

	servers.on('change', e => {
	let server = $(e.target).val()
	$.ajax({
	url: '?servers=' + server,
	type: 'get',
	dataType: 'json',
	success: (data) => {
	let games = []
	games.push('<option disabled selected value="">Selecione um jogo</option>')
	$.each(data, function(key, value) {
	games.push('<option value="' + key + '">' + value + "</option>")
	})
	jogos.html(games.join(""))
	}
	})
	})

	$('form.formulario').on('submit', e => {
	e.preventDefault()
	console.log(servers)
	if(servers.val() != null && jogos.val() != null){
	$('p.resultado').html('O servidor que você escolheu foi o <b>' + $('#servers option:selected').text() + ' (' + servers.val() + ')</b>, e o jogo escolhido foi <b>' + $('#jogos option:selected').text() + ' (' + jogos.val() + ')</b>.')
	}
	})
	})
	</script>
	</head>
	<body>
	<form class="formulario" method="post">
	<div class="form-group">
	<label for="servers">Server</label>
	<select class="form-control" id="servers" name="servers">
	<option disabled selected value="">Selecione um server</option>
	<? foreach ($servers as $key => $value) { ?>
	<option value="<?= $key; ?>"><?= $value; ?></option>
	<? } ?>
	</select>
	</div>

	<div class="form-group">
	<label for="jogos">Jogos</label>
	<select class="form-control" id="jogos" name="jogos">
	<option disabled selected value="">Selecione um jogo</option>
	</select>
	</div>

	<button type="submit" class="btn btn-default">Submit</button>
	</form>

	<div class="jumbotron mt-50">
	<p class="resultado"></p>
	</div>
	</body>
	</html>