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>

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

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();

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

Member Avatar

Doing something like this maybe...

dataType: "json",
    var insertData = '<option value="">Select</option>';
    $.each(skilldata, function(i,v)
        insertData += '<option value="'+v.id+'">'+v.label+'</option>';
    //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'.

    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>

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