Change select and input in real time without reloading the PHP page

I'm having a bit of a problem. I need to make a script to change the first two and second select, but I need the second select to change according to the first. For example, the select cities will have varius numbers of cities and each city its stores.

 <select id="cidade" class="input-store-data1" onchange="carregaoptica()" required>

                <?php
                $lig = new mysqli("localhost","policere_admin","Estagio@ibloom","policere_passatempo");
                $res = $lig->query("SELECT localidade_otica FROM oticas");
                while($otica = $res->fetch_assoc()){
                    echo "<option value='". $otica['localidade_otica'] ."'>". $otica['localidade_otica'] ."</option>";
                }


                echo '</select>';
                echo '<select id="loja" class="input-store-data2" placeholder="Nome" required>';

                $res1 = $lig->query("SELECT nome_otica FROM oticas WHERE localidade_otica=''");
                while($otica1 = $res1->fetch_assoc()){
                    echo "<option>" . $otica1['nome_otica'] . "</option>";
                }
                $lig->close();
                ?>


            </select>

                <script type="text/javascript">
                    carregaoptica() {
                        cidade = document.getElementById('cidade');
                    }

                </script>