I’ve about pulled my hair out with this one.. I understand this could very well be the wrong approach.. but my hands are somewhat tied.. Please do offer any suggestions though.
Hopefully this is enough to explain the issue..
Desire – Select on the “Controlling Row” manipulates the Select on the “Controlled Row”
Issues – If I do a while loop only the last column works (controls top row)
I realize I could hand code each column separately and not loop but want to componentize this and keep it small..
Thank you in advance!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<title>Selects Duplicated</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){ //runs when document.ready
var $superduper;
i=0;
$Tbl_1 = "Tbl";
while (i<=2)
{
FltTbl = "#flt" + i + "_" + $Tbl_1;
FltTbl2 = "flt" + i + "_" + $Tbl_1 + "_" +"2";
ColContainer = "colcontainer" + i;
$((FltTbl)).clone().attr('id', (FltTbl2)).attr('class', (FltTbl2)).appendTo("#" + (ColContainer)).find('select > option:selected').each(function() {});
$(function() {
$("#" + (FltTbl2)).change(function() {
$((FltTbl)).val($(this).val()).trigger('change'); //this triggers when clone select changes //
});
});
i++;
}
});
</script>
</head>
<body>
<table id="Tbl0_2">
<tr>
<td width="70">
<div>
<select id="flt0_Tbl" class="flt0_Tbl">
<option value="">--</option>
<option value="1-1">1-1</option>
<option value="1-2">1-2</option>
<option value="1-3">1-3</option>
<option value="1-4">1-4</option>
</select>
</div>
</td>
<td width="70">
<div>
<select id="flt1_Tbl" class="flt1_Tbl">
<option value="">--</option>
<option value="2-1">2-1</option>
<option value="2-2">2-2</option>
<option value="2-3">2-3</option>
<option value="2-4">2-4</option>
</select>
</div>
</td>
<td width="70">
<div>
<select id="flt2_Tbl" class="flt2_Tbl">
<option value="">--</option>
<option value="3-1">3-1</option>
<option value="3-2">3-2</option>
<option value="3-3">3-3</option>
<option value="3-4">3-4</option>
</select>
</div>
</td>
<td>
<div>Controlled Row</div>
</td>
</tr>
<tr>
<td width="70"><div class="colcontainer0" id="colcontainer0"></div></td>
<td width="70"><div class="colcontainer1" id="colcontainer1"></div></td>
<td width="70"><div class="colcontainer2" id="colcontainer2"></div></td>
<td><div>Controlling Row</div></td>
</tr>
<tr>
<td width="70"><div>Nope</div></td>
<td width="70"><div>Nope</div></td>
<td width="70"><div>Works</div></td>
</tr>
</table>
</body>
</html>
The problem is that the triggering change uses the selectors from the closure that the loop is in, so the selectors are always going to be the third select box by the end of the loop, and therefore will be the third selector when the user clicks something.
I’ve updated your fiddle http://jsfiddle.net/steveukx/x9ASj/1/ to show how to create a closure to fix the value of the selectors.
(It’s worth noting that creating closures in a loop is generally considered bad practice).