2動態創建選擇框使用jquery

-1

我只是想創建一個2選擇框，如果用戶在第一個選擇框中選擇一個選項，第二個選擇框也選擇該選項值或讓我們說2選擇框必須選擇1相同指數值2動態創建選擇框使用jquery

選擇框1選擇索引值2，然後選擇框2也選擇索引值2的onChange反之亦然

這裏是我的代碼，但只有2條選擇框第一行是好的，如果我創建新行，無效

jQuery：

$("#fCVCode\\[\\]").change(function() { 
    var code = $(this).attr('value'); 
    $(this).parent().parent().find("#fCVDesc\\[\\]").val(code); 

}); 
$("#fCVDesc\\[\\]").change(function() { 
    var code = $(this).attr('value'); 
    $(this).parent().parent().find("#fCVCode\\[\\]").val(code); 

});

形式

<td style="text-align: center; padding: 5px;"> 
    <select style="text-transform: uppercase; width: 100%;" name="fCVCode[]" id="fCVCode[]">'; 
     $s = rand(1,99); 
     for($i = 0; $i <= $s; $i++) { 
     $display .= '<option value="'.$i.'">Code '.rand(1,300).'</option>'; 
     } 
    $display .= '</select> 
    </td> 
    <td style="text-align: center; padding: 5px;"> 
    <select style="text-transform: uppercase; width: 100%;" name="fCVDesc[]" id="fCVDesc[]">'; 
     for($i = 0; $i <= $s; $i++) { 
     $display .= '<option value="'.$i.'">Desc '.rand(1,300).'</option>'; 
     } 
    $display .= '</select> 
    </td>

希望你能幫助我。

來源

2010-11-17 Jhay

id屬性必須是唯一的，所以第一次只使用名稱（和刪除那些無效的重複的ID），然後使用.delegate()這樣的：

$("#tableId").delegate("select[name='fCVCode[]']", "change", function() { 
    var code = $(this).val(); 
    $(this).closest('tr').find("select[name=fCVDesc[]").val(code); 
}).delegate("select[name='fCVDesc[]']", "change", function() { 
    var code = $(this).val(); 
    $(this).closest('tr').find("select[name=fCVCode[]").val(code); 
});

當你做一個選擇喜歡$("#fCVDesc\\[\\]")找到的元素該選擇匹配（當然，在第一匹配它，因爲它是一個#id selector），並結合那些，沒有任何在將來創建... .delegate()會聽冒泡的<table>事件新行的工作爲好。

來源

2010-11-17 02:58:35

我不知道如何修改代碼，你已經回答了我現在的表結構

這工作，但不知道如何最大限度地減少它

$("#fCVCode\\[\\]").change(function() { 
    var code = $(this).val(); 
    $(this).parent().parent().find("select").val(code); 
}); 
$("#fCVDesc\\[\\]").change(function() { 
    var code = $(this).val(); 
    $(this).parent().parent().find("select").val(code); 
}); 

$("#fCode\\[\\]").change(function() { 
    var code = $(this).val(); 
    $(this).parent().parent().find("select").val(code); 
}); 
$("#fDesc\\[\\]").change(function() { 
    var code = $(this).val(); 
    $(this).parent().parent().find("select").val(code); 
});

我現在的表結構的東西去像這樣

<table id="fAddCVDetails"> 
<tr> 
<th>Headers</th> 
</tr> 
<tr class="clone"> 
<td style="text-align: center; padding: 5px;"> 
    <select style="text-transform: uppercase; width: 100%;" name="fCVCode[]" id="fCVCode[]">'; 
     $s = rand(1,99); 
     for($i = 0; $i <= $s; $i++) { 
     $display .= '<option value="'.$i.'">Code '.rand(1,300).'</option>'; 
     } 
    $display .= '</select> 
    </td> 
    <td style="text-align: center; padding: 5px;"> 
    <select style="text-transform: uppercase; width: 100%;" name="fCVDesc[]" id="fCVDesc[]">'; 
     for($i = 0; $i <= $s; $i++) { 
     $display .= '<option value="'.$i.'">Desc '.rand(1,300).'</option>'; 
     } 
    $display .= '</select> 
    </td> 
</tr> 
</table>

另一個問題是，此代碼是否真的找到具有該給定名稱屬性的select元素？

find("select[name='fCVCode\\[\\]']");

怎麼我試過這個代碼從textarea的到其他輸入文本類型元素的值和我

$("i m g[name=fCVNoteInsert\\[\\]]").click(function() { 
$(this).parent().parent().find("div").fadeOut(200); 
value = $(this).parent().parent().parent().find("textarea").val(); 
$(this).parent().parent().parent().find("INPUT[name='fCVLeadTime\\[\\]']").val(value); 
});

和形式沒有工作是（注：下面的表結構有5個輸入，所以如果我把查找（「輸入」）所有輸入將具有相同的值。如果我把find（「＃fCVLeadTime」）只有第一行輸入與id fCVLeadTime更改它的值這個問題是一樣的作爲我第一次發佈的問題）。

<table id="fAddCVDetails"> <tr> <th>Headers</th> </tr> <tr> <td style="text-align: center; padding: 5px 10px 5px 5px;"><span><input type="text" id="fCVLeadTime[]" name="fCVLeadTime[]" style="width: 99%;" value="" /></span></td> 
    <div id="noteAttach[]" name="noteAttach[]" class="attachment b-all ds"> 
     <i m g s rc="imageicon" border="0" id="fCVNoteInsert[]" name="fCVNoteInsert[]" style="cursor: pointer;" title="Insert Note"> 
     <span style="float: right;"> 
     <i m g s rc="imageicon" border="0" id="fCVNoteClose[]" name="fCVNoteClose[]" style="cursor: pointer;" title="Close Window"> 
     </span> 
     <div style="padding: 5px;"></div> 
     <textarea type="file" id="note[]" name="note[]" rows="5" cols="30"></textarea> 
    </div> 
     <i m g s rc="imageicon" border="0" name="fCVNotes[]" style="cursor: pointer;" title="'.PR_FORM_DOC_TTIP_UPLOAD_NOTE.'"> 
    </td> </tr> </table>

抱歉，我無法發佈圖片，因此我在圖片和源代碼的字母之間添加空格

來源

2010-11-22 01:59:20 Jhay

2動態創建選擇框使用jquery

回答

相關問題