2 boîte de sélection créée dynamiquement en utilisant jquery

Question

Je veux juste créer une boîte de sélection 2 où si un utilisateur sélectionne une option dans la première boîte de sélection, la deuxième boîte de sélection sélectionne également cette option ou disons que la boîte 2 sélection doit sélectionner 1 identique valeur de l'indice

Select Box 1 sélectionne la valeur d'index 2, puis sélectionnez la case 2 sélectionne également la valeur d'index 2 onChange et vice versa

Voici mon code, mais seulement les 2 boîtes de sélection dans la première ligne est bonne, si je crée une nouvelle ligne, sans effet

Le 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); 

}); 

la forme

<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> 

espère que vous pouvez me aider.

Answer 1

id attributs doivent être uniques, donc d'abord utiliser uniquement le nom (et supprimer les ID en double non valides), puis utilisez .delegate() comme ceci:

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

Lorsque vous faites un sélecteur comme $("#fCVDesc\\[\\]") il trouve les éléments correspondant à ce sélecteur (bien, la première correspondant depuis qu'il est un #id selector) et se fixe à les, pas créé à l'avenir ... .delegate() écouterait des événements sur le bouillonnement <table> travaillant pour de nouvelles lignes ainsi.

Answer 2

Je ne sais pas comment modifier le code que vous avez répondu à ma structure actuelle de la table

Ce travaux ont, mais aucune idée de la façon de minimiser

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

ma structure actuelle de table va quelque chose comme celui-ci

<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> 

une autre question est, est-ce code trouve vraiment l'élément select avec cet attribut de nom donné?

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

coz J'ai essayé ce code pour obtenir une valeur de la zone de texte à un autre élément de type texte d'entrée et ne fonctionne pas pour moi

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

et la forme est (Note: la structure du tableau ci-dessous a 5 entrées, donc si je mets find ("input") toutes les entrées auront les mêmes valeurs et si je mets find ("# fCVLeadTime") seulement la première ligne avec l'identifiant fCVLeadTime change sa valeur ce problème est juste le même comme mon premier problème signalé.)

<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> 

désolé je ne peux pas poster des images donc j'ajoute des espaces entre les lettres de l'image et les balises source