如何在一个窗口中显示AJAX输出 <div> 从jQuery插件生成？

Question

I am using following script to dynamically add to html.

<script type="text/javascript">
    $(document).ready(function () 
    {
        $('<div/>', 
        {
            'class' : 'extraPerson', html: GetHtml()
        }).appendTo('#container');
        $('#addRow').click(function () 
        {
            $('<div/>', 
            {
                'class' : 'extraPerson', html: GetHtml()
            }).hide().appendTo('#container').slideDown('slow');
        });
    })
    function GetHtml()
    {
        var len = $('.extraPerson').length;
        var $html = $('.extraPersonTemplate').clone();
        $html.find('[name=family_member_name]')[0].name="family_member_name" + len;
        $html.find('[name=gender]')[0].name="gender" + len;
        $html.find('[name=age]')[0].name="age" + len;
        $html.find('[name=fdegrees]')[0].name="fdegrees" + len;
        $html.find('[name=fcourse]')[0].name="fcourse" + len;
        $html.find('[name=blood_group]')[0].name="blood_group" + len;
        $html.find('[name=cell_no]')[0].name="cell_no" + len;
        return $html.html();    
    }   
</script>

Now i'm calling AJAX method on onChange event of <select> having id="fdegrees" . i am receiving the proper AJAX response but not able to add to the HTML. The code for it is as follows.

<div class="extraPersonTemplate">
        <div class="controls controls-row">
           <select name="fdegrees" id="fdegrees" onChange="getDegree1('familyfinddegree.php?fdegrees='+this.value)">
               <option value="">Select Degree</option>
               <option value="1">Bachlor</option>
               <option value="2">Master</option>
           </select>&nbsp;&nbsp;&nbsp;&nbsp;
           <div style="float:left" id="courses1">
               <select name="fcourse">
               <option>Select Courses</option>
               </select>
           </div>
        </div>
    </div>

The Javascript for AJAX functionality.

<script>
function getXMLHTTP() { //function to return the xml http object
        var xmlhttp=false;  
        try{
            xmlhttp=new XMLHttpRequest();
        }
        catch(e)    {       
            try{            
                xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e){
                try{
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch(e1){
                    xmlhttp=false;
                }
            }
        }

        return xmlhttp;
    }

    function getDegree1(strURL) {   

        var req = getXMLHTTP();

        if (req) {

            req.onreadystatechange = function() {
                if (req.readyState == 4) {
                    // only if "OK"
                    if (req.status == 200) {
                        document.getElementById('courses1').innerHTML=req.responseText;

                    } else {
                        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                    }
                }               
            }       
//          alert(strURL);  
            req.open("GET", strURL, true);
            req.send(null);
        }
    }       
</script>

The PHP file gives AJAX response is as follows:

<?php 
    $degrees=$_REQUEST['fdegrees'];

    $link = mysql_connect('localhost', 'root', ''); //changet the configuration in required

    if (!$link) 
    {
        die('Could not connect: ' . mysql_error());
    }
    mysql_select_db('gujarati_mandal');
    $query="select course from courses where degree_id=$degrees";

    $result=mysql_query($query);

    $i=0;
?>

<select name="fcourse<?php echo $i?>">
    <option>Select Course</option>
    <?php while($row=mysql_fetch_array($result)) { ?>
        <option value="<?php echo $row['course']?>"><?php echo $row['course']?></option>
    <?php } ?>
</select>

Answer 1

change this code The PHP file gives AJAX response is as follows:

<?php
$str="";
$str. = "
<select name='fcourse".$i.">
    <option>Select Course</option>";
    while($row=mysql_fetch_array($result)) 
    {
 $str. = "
        <option value=".$row['course'].">".$row['course']."</option>";
    }
 $str. = "
</select>";
echo $str;
?>

this echo result will give u ur desirred O/P and u can append to it DIV by using innerHTML..