Iterate through php array in jquery

Question

So I have a php array that I am JSON encoding and handing to some JQuery. Basically I am using the information from the array to dynamically change the content of one drop down based on the value of another drop down. I am running into some problems with the JQuery though as JQuery is pretty new to me.

First off my PHP:

<?php
$sql = mysql_query("SELECT * FROM menu") or die(mysql_error());

$menuItems  = array();
$x          = 0;
while($row = mysql_fetch_object($sql))
{
    $menuItems[$x]['ID']        = $row->ID;
    $menuItems[$x]['parent']    = $row->parent;
    $menuItems[$x]['name']      = $row->Name;   
    $menuItems[$x]['header']    = $row->header;
    $menuItems[$x]['Sort']      = $row->sort;

    $x++;
}
?>

This code returns an array of ~30 menu items.

Then my JQuery:

<script>
     var menuItems = <?php echo json_encode($menuItems); ?>;

     $('#dropdown1').change(function (){
          if($('#dropdown1').val() == 0){
               $('dropdown2').children().remove().end()

               for(var x = 0; x < menuItems.length; x++){
                    if(menuItems[x]['header'] == 1){
                         $('#dropdown2').options[menuItems[x]['sort']] = new Option(menuItems[x]['name'], menuItems[x]['sort']);
                    }
                }
           }
      });
 </script>

What I want this to do is when dropdown1 is changed, dropdown2's options are removed and then repopulated with specific things from the array.

Currently this code does delete the options for dropdown2 when dropdown1 is changed but re-population just isn't working. From what I can tell in testing, the for loop to iterate through the array is only entered once, despite their being about 30 items in it and I assume that is were my main problem is.

What am I doing wrong here?

Answer 1

change it to

 for(var x = 0; x < menuItems.length; x++){
        if(menuItems[x]['header'] == 1){
             var option = $('<option />', {
                  text : menuItems[x]['name'],
                  value: menuItems[x]['sort']
             });
             $('#dropdown2 option[value="'+[menuItems[x]['sort']]+'"]').replaceWith(option);
        }
 }

$('#dropdown2').options[] is not valid, as jQuery doesn't have those methods, that's for plain JS DOM nodes.

Answer 2

So from the comments there seemed to be some confusion on what I meant, and I apologize. It was one of the instances where the explanation made sense to me, but I just must not have conveyed everything well enough.

To clear up a little bit of the confusion. The array that was passed from the PHP code to the javascript contained everything I could ever need for the second drop-down.

As many pointed out the .options[] was the culprit for why the code wasn't executing. This was simply from another example I had found, and with my limited knowledge I assumed it was correct, and it wasn't.

I instead used the the .append() function and things seem to be working normally now.