PHP和JQuery不工作

我有下面的代码。这是一个简单的两步下拉列表。第一个列表应该触发第二个列表。我不明白为什么从第一个列表中选择一些东西似乎没有反应。我确信我错过了一些非常简单的东西，但我似乎无法理解

非常感谢

更新：只是为了提供更多的信息。控制台中的变量-$selectvalue加载find和ajax至少显示带有GET-selectvalue变量的URL。问题是第二个下拉菜单没有反映这一点，即使HTML输出正确显示了它。另外，如果我手动加载带有GET变量的页面，它也可以正常工作

<?php
$selectvalue = mysqli_real_escape_string($con, $_GET['svalue']);


?>
<script type="text/javascript">
$(document).ready(function($) {
  var list_target_id = 'state-select'; //first select list ID
  var list_select_id = 'installation'; //second select list ID
  var initial_target_html = '<option value="">Please select a colour...</option>'; //Initial prompt for target select

  $('#'+list_target_id).html(initial_target_html); //Give the target select the prompt option

  $('#'+list_select_id).change(function(e) {
    //Grab the chosen value on first select list change
    var selectvalue = $(this).val();

    //Display 'loading' status in the target select list
    $('#'+list_target_id).html('<option value="">Loading...</option>');

    if (selectvalue == "") {
        //Display initial prompt in target select if blank value selected
       $('#'+list_target_id).html(initial_target_html);
    } else {
      //Make AJAX request, using the selected value as the GET
      $.ajax({url: 'index.php?page=search&svalue='+selectvalue,
             success: function(output) {
                //alert(output);
                $('#'+list_target_id).html(output);
            },
          error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status + " "+ thrownError);
          }});
        }
    });
});
</script>
<div class="container">
    <div class="content">
        <h3><?php echo $pageName; ?> </h3>
        <?php if ($msgBox) { echo $msgBox; } ?>

        <p>
            Before you commit to a membership, it is best to be sure there is a Scout available in the area you need. Use the search tool below to see available Scouts.
        </p>

        <div class="row">
            <div class="col-md-4">
                <div class="loginCont">
                    <div class='login text-center'>

                        <?php if ($msgBox) { echo $msgBox; } ?>
                        <form method = "post" action="index.php?page=users">
                            <select name="state-select" id="state-select">
                                 <option value="">Please select..</option>
                                 <option value="AL">AL</option>
                                 <option value="AK">AK</option>
                                 <option value="AR">AR</option>
                            </select>
                            <p>
                            <?php


                             $result = mysqli_query($con,"SELECT installations.name FROM installations WHERE installations.state = '$selectvalue'");


                             echo '<select name="installation" id="installation">';
                             while($row = mysqli_fetch_array($result)) { ?>

                                <option value="<?=$row['id']?>"> <? echo $row['name'] ?></option>


                            <?php  }
                             echo '</select>';

                                     $_SESSION['installation_id'] =  $_POST['installation'];


                             mysqli_close($con);
                                ?>
                            </p>
                            <button>Check This Location</button>
                        </form>

…应该更像：

var selectValue = $(this).find('option:selected').val();

你能试试吗

至少试一下

console.log(selectValue);

---

…在发送请求之前请确认。

旁注：如果这句话是感谢@Fred ii-我的代码中实际上是正确的。我抄这一部分的时候把它扔进去了。明白了，我得检查一下。是否设置了短标记？是的，在我尝试实现此功能之前，一切都正常工作。只是似乎对更改第一个下拉列表没有反应。javascript控制台中有什么有趣的东西吗？我尝试了这个，结果还是一样的。alertoutput向我显示了这个非常棒的HTML页面，其中包含了我所需要的内容，但是第二个下拉列表不会加载，仍然会显示“请选择颜色”的初始提示。。。就像它只是停止加载。。。console.log中没有任何内容。谢谢你的帮助。这是我一直在使用的教程

console.log(selectValue);