PHP数据不是由Ajax发送的

Question

I am trying to pass value from ajax to get-data.php. I have a lot research on StackOverflow. However, I still cannot get it to work and I am not sure why is this the case. Whenever I var_dump the $_POST , I always get array(0).

index.php

    <select id="cis_major">
      <option disabled selected value> -- select an option -- </option>
      <option value="CS150">CS150</option><option value="CS180">CS180</option>
      <option value="CS240">CS240</option><option value="CS280">CS280</option>               <      option value="CS350">CS350</option><option value="CS360">CS360</option>
      <option value="CS401">CS401</option><option value="CS402">CS402</option>
      <option value="CS421">CS421</option><option value="CS440">CS440</option>
      <option value="CS460">CS460</option><option value="CS476">CS476</option>
      <option value="CS480">CS480</option>
    </select>

    <div id="selection"></div>

    <div id="show">
        <!-- ITEMS TO BE DISPLAYED HERE --> 
   </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#cis_major").on("change", function () {
                var selected = $(this).val();
                $("#selection").html("Your selected:" + selected);
                $.ajax({
                    type: "POST",
                    url: "get-data.php",
                    data: {selected:selected},
                    success: function (result) {
                        $("#show").html(result);
                    }
                });
            });
        });
    </script>

get-data.php

<?php

var_dump($_POST["selected"]);

if(isset($_POST["selected"])){
    /* DO YOUR QUERY HERE AND GET THE OUTPUT YOU WANT */
    echo "I love you"; /* PRINT THE OUTPUT YOU WANT, IT WILL BE RETURNED TO THE ORIGINAL PAGE */
}

Below is what get from the inspection.