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>
