动态使用Jquery添加下拉列表并克隆该下拉列表？(Add dropdown list dynamically using Jquery and also cloning that dropdown list?)

 我有克隆元素的代码，但是如何根据第一个下拉列表中选择的结果自动填充第二个元素？ 
 
 这是我为克隆找到的代码。 
 
<table id="BoxTable">
<tr>
    <th>Name</th>
    <th>Comparision</th>
    <th>Value</th>
    <th>Delete</th>
</tr>
<tr id="TemplateRow">
    <td>
        <select name="BoxName" id="BoxName">
            <option selected="selected" value="attr1">attr1</option>
            <option value="attr2">attr2</option>
            <option value="attr3">attr3</option>

        </select>
    </td>
    <td>
        <select name="BoxComparison" id="BoxComparison">
            <option selected="selected" value="=">=</option>
            <option value=">">&gt;</option>
            <option value="&lt;">&lt;</option>
            <option value="Like">Like</option>
            <option value="!=">!=</option>
        </select>
    </td>
    <td>
        <input name="BoxVal" type="text" id="BoxVal" />
    </td>
    <td>
        <input id="DeleteBoxRow" type="checkbox" name="DeleteBoxRow" />
    </td>
</tr>
<tr>
    <td colspan="4">
        <input type="submit" name="AddAttr" value="Add Box Attribute" id="AddAttr" />
    </td>
</tr>
</table>
 
 现在jQuery ... 
 
$(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();
});
 
 请帮帮我.. 

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?
 
This is a code i found for cloning.
 
<table id="BoxTable">
<tr>
    <th>Name</th>
    <th>Comparision</th>
    <th>Value</th>
    <th>Delete</th>
</tr>
<tr id="TemplateRow">
    <td>
        <select name="BoxName" id="BoxName">
            <option selected="selected" value="attr1">attr1</option>
            <option value="attr2">attr2</option>
            <option value="attr3">attr3</option>

        </select>
    </td>
    <td>
        <select name="BoxComparison" id="BoxComparison">
            <option selected="selected" value="=">=</option>
            <option value=">">&gt;</option>
            <option value="&lt;">&lt;</option>
            <option value="Like">Like</option>
            <option value="!=">!=</option>
        </select>
    </td>
    <td>
        <input name="BoxVal" type="text" id="BoxVal" />
    </td>
    <td>
        <input id="DeleteBoxRow" type="checkbox" name="DeleteBoxRow" />
    </td>
</tr>
<tr>
    <td colspan="4">
        <input type="submit" name="AddAttr" value="Add Box Attribute" id="AddAttr" />
    </td>
</tr>
</table>
 
Now jQuery...
 
$(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();
});
 
Please help me..

原文：https://stackoverflow.com/questions/6502413