克隆有一行包含選擇和克隆選擇值

我有這樣的HTML：克隆有一行包含選擇和克隆選擇值

<tr> 
    <td> 
     <input type="hidden" name="MatchId[]" value=""> 
     <select name="TeamId[]"> 
      <optgroup label="Women"> 
       <option value="18">Women 1</option> 
       <option value="17">Women 2</option> 
      </optgroup> 
      <optgroup label="Men"> 
       <option value="9">Men 1</option> 
       <option value="8">Men 2</option> 
      </optgroup> 
     </select> 
    </td> 
    <td> 
     <select name="Day[]"> 
      <!-- blah --> 
     </select> 
    </td> 
    <td> 
     <input class="addButton" type="button" value="+"> 
    </td> 
    <td> 
     <input class="removeButton" type="button" value="-"> 
    </td> 
</tr>

我想克隆行，當我點擊+按鈕，而且還設置了<select>到價值與原始行相同。

現在，我有這樣的代碼，它成功地克隆行，但與第一個值葉新<select>領域選擇：

$('.addButton').livequery('click', function() 
{ 
    var $btn = $(this); 

    var $clonedRow = $btn.closest('tr').clone(); 

    $btn.closest('tbody').append($clonedRow); 
});

我怎麼能這樣做呢？

編輯：子問題：我點擊+按鈕後，如何將重點放在克隆行的第一個字段上？

來源

2011-09-16 Mike

您可以手動做到這一點：

http://jsfiddle.net/Tp7hg/

$('.addButton').live('click', function() 
{ 
    var $btn = $(this); 
    var $row = $btn.closest('tr') 

    var $clonedRow = $row.clone(); 
    $clonedRow.find("select").each(function(i){ 
     this.selectedIndex = $row.find("select")[i].selectedIndex; 
    }) 

    $btn.closest('tbody').append($clonedRow); 
});

來源

2011-09-16 20:41:07

^_ ^英雄所見略同（雖然有點不同） – Neal

@Neal笑我只希望有一個更優雅的解決方案：P –

多虧了你們倆。我在這裏同時找到了答案http://stackoverflow.com/questions/742810/clone-isnt-cloning-select-values – Mike

使用選擇元素selectedIndex

$('.addButton').live('click', function() 
{ 
    var $btn = $(this); 

    var $clonedRow = $btn.closest('tr').clone(); 

    var index = $('select', $btn.closest('tr')).prop('selectedIndex'); 

    $('select', $clonedRow).prop('selectedIndex', index); 

    $btn.closest('tbody').append($clonedRow); 
});

來源

2011-09-16 20:42:01 Neal

你可以傳遞函數爲val這給指數試試這個。另外，我建議將jQuery對象存儲在一個變量中，這樣您就不必爲每個選擇構建它。

$('.addButton').live('click', function() { 
    var $btn = $(this), 
     $row = $btn.closest('tr'), 
     $clonedRow = $row.clone(); 
     $selects = $row.find('select'); 

    $btn.closest('tbody').append($clonedRow); 
    $clonedRow.find('select').val(function(index) { 
     return $selects.eq(index).val(); 
    }); 
});

來源

2011-09-16 20:49:23 natedavisolds

不錯！我必須記住你可以傳遞一個函數給val。這是多數jQuery方法的方式嗎？（只有另一個我見過它是過濾器）。 –

@Joseph - 是的，大部分這種jQuery對象都有一個你可以傳入的函數。它非常方便，很少使用。 – natedavisolds

克隆有一行包含選擇和克隆選擇值

回答

相關問題