Question

I have a DDL (#engine) that needs to have its option values set via a MySql table based on the selected #make ddl.

I have the below script which passes to a php file – I know the php file is fine as I can output the results of the query independantly.

But, I cannot get the option values to update based on the returned array … maybe a result of using GET? It’s the first time i’m trying to return via AJAX (usually just use it to update data tables etc.)

Is there something amiss in my script?

$(document).ready(function() {

$("select#make").change(function(){
    $('#engine').find('option').remove().end(); //clear the engine ddl
    var make = $(this).find("option:selected").val(); //Need the value not the text

    $.ajax({
        url:'get-engine.php',
        type:'GET',
        data:{engine:make},
        dataType:'json',
        cache:false,
        success:function(data){


         var ddl = document.getElementById('engine');                      

         for(var c=0;c<obj.length;c++)
              {              
               var option = document.createElement('option');
               option.value = obj[c];
               option.text  = obj[c];                           
               ddl.appendChild(option);
              }


    },
        error:function(jxhr){
        alert(jxhr.responseText);

    }
    }); 

});
});

And the get-engine.php ..

$make = $_GET['engine'];

    $query= ("SELECT * FROM tb_engine where make_id='$make'");
    $result = mysql_query($query);
    $temp = array();

    while ($row = mysql_fetch_assoc($result)) {

     if(empty($temp))
     {
       $temp=array($row['engine_type']);
     }
     else
     {  
       array_push($temp,$row['engine_type']);
     }

    }
    echo (json_encode($temp));
    ?>

It so far refuses to update, can’t quite find why?

Thanks in advance for all advice

Answer 1

you can try

//json is the json you have recieved in the success handler

$("#engine").empty();
$.each( json, function( index, item ) {
           $("<option/>",{value:item,text:item}).appendTo("#engine");

        });

DEMO