2011-06-28 126 views
0

我有克隆元素的代碼,但如何根據在第一個下拉列表中選擇的結果自動填充第二個元素?使用Jquery動態添加下拉列表並克隆該下拉列表?

這是我發現用於克隆的代碼。

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

請幫助我..

回答

2

退房解決方案在這裏http://jsfiddle.net/dSgdD/2/

+0

它不自動填充上改變的值的下拉列表包含下拉列表的列「名稱」。 – nikunj2512

+4

您需要做的第一件事是讓您的問題更易於理解。我大部分時間都在猜測你真正想達到的目標。如何改寫你的問題,並再次閱讀你的問題,看看你是否明白你一直在問什麼。 –

+0

我明確提到如何根據第一個下拉列表的結果自動填充第二個dropdwon列表。 – nikunj2512