使用jQuery获取下拉框选中值传PHP时遇selectedBook未定义错误求助

错误原因 #

1. 变量作用域问题：你把selectedBook和selectedChapter定义在change事件的回调函数内部，这两个变量只能在回调函数里访问，外面的判断逻辑和AJAX请求根本拿不到它们的值。而且你是在点击按钮时才绑定change事件，用户没触发下拉框变化的话，变量根本不会被赋值。
2. 选择器拼写错误：第二个下拉框的class是chaper（少了个t），但JS里用了select.chapter，导致选择器找不到对应元素，selectedChapter永远不会被定义。
3. 冗余的事件绑定：点击按钮时才绑定下拉框的change事件完全没必要，直接在点击按钮时获取当前选中值就行。

修复方案 #

• 去掉点击按钮时绑定的change事件，直接在点击事件里获取两个下拉框的当前选中值。
• 修正第二个下拉框的class拼写（保持语义一致）。
• 简化选中值的获取方式，用$(selector).val()直接获取下拉框选中值，更简洁。
• 增加对默认选项的判断，避免发起无效请求。

修正后的完整代码 #

<?php

// Handle AJAX request (start)
if( isset($_POST['ajax']) && isset($_POST['book']) && isset($_POST['chapter']) ){
  echo json_encode($_POST['book'] . " " . $_POST['chapter']);
  exit;
}
// Handle AJAX request (end)
?>

<!doctype html>
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {

                $("#json-one").change(function() {

                        var $dropdown = $(this);

                        $.getJSON("jsondata/data.json", function(data) {

                                var key = $dropdown.val();
                                var vals = [];

                                switch(key) {
                                        case 'Genesis':
                                                vals = data.Genesis.split(",");
                                                break;
                                        case 'Exodus':
                                                vals = data.Exodus.split(",");
                                                break;
                                        case 'Leviticus':
                                                vals = data.Leviticus.split(",");
                                                break;
                                        case 'Numbers':
                                                vals = data.Numbers.split(",");
                                                break;
                                        case 'Deuteronomy':
                                                vals = data.Deuteronomy.split(",");
                                                break;
                                        case 'base':
                                                vals =  ['Select book'];
                                }

                                var $jsontwo = $("#json-two");
                                $jsontwo.empty();
                                $.each(vals, function(index, value) {
                                        $jsontwo.append("<option>" + value + "</option>");
                                });

                        });
                });

        });
    </script>
  </head>
  <body >

   <form method='post' action>
   <select name='book' class='book' id='json-one'>
      <option selected value="base">- Select Book -</option>
      <option value="Genesis">Genesis</option>
      <option value="Exodus">Exodus</option>
      <option value="Leviticus">Leviticus</option>
      <option value="Numbers">Numbers</option>
      <option value="Deuteronomy">Deuteronomy</option>
   </select>

   <br />

   <!-- 修正class拼写：chaper → chapter -->
   <select name='chapter' class='chapter' id='json-two'>
      <option>Please choose from above</option>
   </select>

   <input type='button' name='submit' value='click' id='but' />
   <!-- 增加显示响应的元素 -->
   <div id='response'></div>
   </form>
   <!-- Script -->
   <script>
   $(document).ready(function(){
      $('#but').click(function(){
         // 直接获取当前选中值
         var selectedBook = $("select.book").val();
         var selectedChapter = $("select.chapter").val();

         // 增加对默认选项的判断
         if(selectedBook !== 'base' && selectedChapter !== 'Select book' && selectedBook.length > 0 && selectedChapter.length > 0){
            $.ajax({
               type: 'post',
               data: {ajax: 1, book: selectedBook, chapter: selectedChapter},
               dataType: 'json',
               success: function(response){
                   $('#response').text('response : ' + response );
               },
               // 增加错误处理
               error: function(xhr, status, error){
                   $('#response').text('Error: ' + error);
               }
            });
         } else {
             $('#response').text('请选择有效的书籍和章节');
         }
      });
   });
   </script>
  </body>
</html>

额外优化点 #

• 增加错误处理函数，方便调试AJAX请求问题。
• 增加默认选项判断，避免用户选择初始提示选项时发起无效请求。
• 添加#response元素，用来显示AJAX响应结果（原代码中缺少该元素，成功回调操作会无效）。

内容的提问来源于stack exchange，提问作者bsteo