Second dropdown menu only recognizes first option

Question

In my weather forecast site, I had one dropdown menu with 20 cities and selecting one city would show its forecast. It uses an array with city_codes and city names that are needed to get all the info for a specific city.
Everything was working fine but then I decided to increase the number of cities and then I realized that the list had became too long to be suitable.

The best way to solve the problem was to create a first dropdown menu where user can select a "state" and then, on a second dropdown menu, choose a "city" from that state, making much shorter lists.

I think that I am very close to the solution, but something is wrong in the script because whatever state or whatever city I choose, it only shows the forecast for "State 1" and "city A".

I am a beginner and despite my efforts of trial-error sequences I had to give up and ask for help.

Can someone please give me a hint of what I am doing wrong? Thank you so much in advance!

Current code:

 <?PHP
 // array with city codes and city names
 $arr = ["31880" => "City A", 
        "31994" => "City B",
        "31937" => "City C", 
        "32046" => "City D"];

       $city = isset($_POST['city']) ? $_POST['city'] : array_keys($arr)[0];
       ?>


       <form id="dropdowns" action="">

       <!-- <label>States:</label>-->
            <select id="states" name="states">
                <option value="000">- Select State -</option>
            </select>

        <br />

        <!-- <label>Cities:</label> -->
            <select id="city" name="city" onchange="this.form.submit()">
                <option value="000">- Select City -</option>

      </select>
      </form>


     <script type="text/javascript">
        var myJson = {
     "states": [
      {
        "name": "State 1",
        "id": "state1",
        "city": [
            {
                "name": "City A",
                "id": "31880",
            },
            {
                "name": "City B",
                "id": "31994",
            }
         ]
      },
      {
        "name": "State 2",
        "id": "state2",
        "city": [
            {
                "name": "City C",
                "id": "31937",
            },
            {
                "name": "City D",
                "id": "32046",
            }
           ]
          }
        ]
       }

      $.each(myJson.states, function (index, value) {
      $("#states").append('<option value="'+value.id+'">'+value.name+'</option>');
      });

     $('#states').on('change', function(){
console.log($(this).val());
for(var i = 0; i < myJson.states.length; i++)
{
  if(myJson.states[i].id == $(this).val())
  {
     $('#city').html('<option value="000">- Select City -</option>');
     $.each(myJson.states[i].city, function (index, value) {
        $("#city").append('<option value="'+value.id+'">'+value.name+'</option>');
         });
        }
       }
     });
    </script>

Answer 1

You are submiting a form with default GET method but actually looking for a POST parameter here: $city = isset($_POST['city']) ? $_POST['city'] : array_keys($arr)[0];.

Change it to $city = isset($_GET['city']) ? $_GET['city'] : array_keys($arr)[0]; or change your form tag to <form id="dropdowns" method="POST"> and it should be working as expected.