JQuery: variable from .change does not appear in .load

Question

I am setting up dynamic drop-down lists: selecting in the selection category # informs the contents of the select # subdirectory.

this is the html for select # category:

<select name="category" id="category">
    <option>Click Here to choose a category</option>
           <?php foreach ($categories as $key => $category) { ?>
    <option value="<?php echo $key ?>"><?php echo $category ?></option>
           <?php } ?>         
</select>

<select name="subcat" id="subcat">
    <option>&lt;-- First Choose a Category</option>                           
</select>

this is a jQuery statement:

$(document).ready(function(){
    $("select#category").change(function(){
        $("select#subcat").load("subcats.php",{ id: $(this).val(), ajax: 'true'});
    });
});

this is subcats.php:

<?php
      //source of categories
      include("config.php") ;
      //initiate option list
      $options =  '<option value="">Choose a Sub-category</option>'."\n" ;
      if(!empty($_GET["id"])) {
      //iterate through the categories
      foreach ($categories as $key => $category) {
      if ($_GET["id"] == $key) {
      //select the data source
      $subcats = file('subcat/'.$key.'.dat', FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES) ;
      natsort($subcats);
      //create the rest of the option list
          foreach ($subcats as $subcat) {
          list ($subname,$subkey ) =explode ("\t", $subcat) ;
           $options .=  '<option value="'.$subkey.'">'.$subname.'</option>'."\n" ;
      }
      echo  $options ;   
          }
      }
      }  else {
      // if no variable given provide option list as error check
      echo  '<option value="">&lt;-- Choose a Category First</option>
      <option value="">Foo Bar</option>'."\n" ;   
          }
      ?>

I understand that it id: $(this).val()provides the selected option from select#categoryfor use in a php document; I'm here? Indeed, if I read the documents correctly, I don’t even need a bit. The , { id: $(this).val(), ajax: 'true'} ajax request .loadworks because the error checking menu items are displayed in select#subcats.

However, that all that appears: the variable does not seem to pass ...

Is there any help Thanks in advance!

Answer 1

console.log($(this).val()) .load

, ?

: , , POST , .

$("#feeds").load("feeds.php", {limit: 25}, function(){ alert("The last 25 entries in the feed have been loaded"); });

http://api.jquery.com/load/

: " POST , ; GET ."

$_REQUEST['id'] $_GET['id'] $_POST['id'] (. php.net:: $_ REQUEST )

Answer 2

this select#subcat. :

$(document).ready(function(){
   $("select#category").change(function(){
      $("select#subcat").load("subcats.php",{ id: $("select#category").val(), ajax: 'true'});
   })
})