dropdown values using AJAX

[Priti_P]

Hello,

I have select(/dropdown) list.Below is code

<div id="complete_form">
<b>Skill Type :</b>
<select id="skill_type_name" onchange="load_div()">
<option value="">Select</option>
<option value="Language">Language</option>
<option value="Database">Database</option>
<option value="Framework">Framework</option>
</select>

<div id="id_skill_name" onchange="load_other_skill()">
<b>Skill : </b>
<select id="skill_name" name="Skill[skill_id]">
<option value="">Select</option>
<option value="test language 1">test language 1</option>
<option value="test db 2">test language 2</option>
<option value="test fw 3">test langugae 3</option>
</select>
</div>

In this I want to functioning like:
clicking on first div should load values in 2nd div.
2nd div's values are fetched from DB.

var $j = jQuery.noConflict();
             $j.ajax({
                        url:'index.php?r=Skill_form/ReflectSkillNames',
                        type:'POST',
                        data:name={'first_skill_type':first_skill_type,},
                        success:function(skill_data2){ 
                                            skill_data=skill_data2;
                                            alert(skill_data);               
                        }); 

and in ReflectSkillNames method I have fetch values from DB.
when I var_dump the array in ReflectSkillNames and alert it in ajax call.
then it shows me var_dump.

but now how to set those array values to <select> ???

Doing something like this maybe...

dataType: "json",
success:function(skill_data){ 
    var insertData = '<option value="">Select</option>';
    $.each(skilldata, function(i,v)
    {
        insertData += '<option value="'+v.id+'">'+v.label+'</option>';
    });
    $('#skill_name').html(insertData);
    //also update the  #name="Skill[skill_id]"# with the correct skill id
}

Not sure what server-side language you're using, but convert your DB result array to json, e.g. in PHP:

echo json_encode($result);

The example assumes that your $result array contains two items in each row, 'id' and 'label'.

array(
    0=>array('id'=>'1', 'label=>'SELECT'),
    1=>array('id'=>'7', 'label=>'DELETE'),
    2=>array('id'=>'9', 'label=>'REPLACE'),
    3=>array('id'=>'16', 'label=>'UNION'),
    4=>array('id'=>'4', 'label=>'ORDER BY')
)

Your output should then look like...

<div id="id_skill_name" onchange="load_other_skill()">
    <b>Skill : </b>
    <select id="skill_name" name="Skill[skill_id]">
        <option value="">Select</option>
        <option value="1">SELECT</option>
        <option value="7">DELETE</option>
        <option value="9">REPLACE</option>
        <option value="16">UNION</option>
        <option value="4">ORDER BY</option>
    </select>

Any reason why you've used onchange with the div instead of the select?
In addition instead of an inline onchange...

$('#skill_name').change(function()
{
    load_other_skill();
});