Problem in getting the value of Selected Option in a Select Box Using jQuery-CodePudding

I have the code below, trying to get the variables from two selected boxes with jQuery to pass them to PHP. All seems ok but for some reason I can't get the variables (JS error: Uncaught ReferenceError: selectedBook is not defined)

<?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 />

   <select name='chapter' class='chaper' id='json-two'>
      <option>Please choose from above</option>
   </select>

   <input type='button' name='submit' value='click' id='but' />
   </form>
   <!-- Script -->
   <script>
   $(document).ready(function(){
      $('#but').click(function(){

         $("select.book").change(function () {
            var selectedBook = $(this).children("option:selected").val();
         });

         $("select.chapter").change(function () {
            var selectedChapter = $(this).children("option:selected").val();
         });

         if(selectedBook.length > 0 && selectedChapter.length > 0){
            $.ajax({
               type: 'post',
               data: {ajax: 1, book: selectedBook, chapter: selectedChapter},
               dataType: 'json',
               success: function(response){
                   $('#response').text('response : '   JSON.stringify(response) );
               }
            });
         }

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

My jsondata/data.json if matters is:

{
        "Genesis": "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50",
        "Exodus": "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40",
        "Leviticus": "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27",
        "Numbers": "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36",
        "Deuteronomy": "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34"
}

CodePudding user response：

 $(document).ready(function(){
      $('#but').click(function(){

         $("select.book").change(function () {
            var selectedBook = $(this).children("option:selected").val();
         });

         $("select.chapter").change(function () {
            var selectedChapter = $(this).children("option:selected").val();
         });

         if(selectedBook.length > 0 && selectedChapter.length > 0){
            $.ajax({
               type: 'post',
               data: {ajax: 1, book: selectedBook, chapter: selectedChapter},
               dataType: 'json',
               success: function(response){
                   $('#response').text('response : '   JSON.stringify(response) );
               }
            });
         }

      });
   });

var selectedBook is outside the scope of visibility - variables declared inside the function are not visible outside of it