Add dropdown list dynamically using Jquery and also cloning that dropdown list?
<p>I have the code for cloning elements but how to auto populate the second one according to the result selected in the first drop down list?</p>

<p>This is a code i found for cloning.</p>

<pre><code>&lt;table id="BoxTable"&gt;
&lt;tr&gt;
    &lt;th&gt;Name&lt;/th&gt;
    &lt;th&gt;Comparision&lt;/th&gt;
    &lt;th&gt;Value&lt;/th&gt;
    &lt;th&gt;Delete&lt;/th&gt;
&lt;/tr&gt;
&lt;tr id="TemplateRow"&gt;
    &lt;td&gt;
        &lt;select name="BoxName" id="BoxName"&gt;
            &lt;option selected="selected" value="attr1"&gt;attr1&lt;/option&gt;
            &lt;option value="attr2"&gt;attr2&lt;/option&gt;
            &lt;option value="attr3"&gt;attr3&lt;/option&gt;

        &lt;/select&gt;
    &lt;/td&gt;
    &lt;td&gt;
        &lt;select name="BoxComparison" id="BoxComparison"&gt;
            &lt;option selected="selected" value="="&gt;=&lt;/option&gt;
            &lt;option value="&gt;"&gt;&amp;gt;&lt;/option&gt;
            &lt;option value="&amp;lt;"&gt;&amp;lt;&lt;/option&gt;
            &lt;option value="Like"&gt;Like&lt;/option&gt;
            &lt;option value="!="&gt;!=&lt;/option&gt;
        &lt;/select&gt;
    &lt;/td&gt;
    &lt;td&gt;
        &lt;input name="BoxVal" type="text" id="BoxVal" /&gt;
    &lt;/td&gt;
    &lt;td&gt;
        &lt;input id="DeleteBoxRow" type="checkbox" name="DeleteBoxRow" /&gt;
    &lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td colspan="4"&gt;
        &lt;input type="submit" name="AddAttr" value="Add Box Attribute" id="AddAttr" /&gt;
    &lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>Now jQuery...</p>

<pre><code>$(function() {
//attach the a function to the click event of the "Add Box Attribute button that
will add a new row
$('#AddAttr').click(function() {
//clone the template row, and all events attached to the row and everything in it
var $newRow = $('#TemplateRow').clone(true);

//strip the IDs from everything to avoid DOM issues
$newRow.find('*').andSelf().removeAttr('id');

//add the cloned row to the table immediately before the last row
$('#BoxTable tr:last').before($newRow);

    //to prevent the default behavior of submitting the form

    return false;
});

//attach a remove row function to all current and future instances of the   
"remove row" check box
$('#DeleteBoxRow').click(function() {
    //find the closest parent row and remove it
    $(this).closest('tr').remove();
});

//finally, add an initial row by simulating the "Add Box Attribute" click
$('#AddAttr').click();
});
</code></pre>

<p>Please help me..</p>
