I have a dynamically generated select tag. Basically, every time a table row gets generated, so does a select tag. This is all done with PHP and html:
<?php $a=0; ?>
<?php foreach($routes as $r){?>
<tr>
<td><?php echo $r['ROUTE']; ?></td>
<td><?php echo $r['CARRIER']; ?></td>
<td>
<select id="driver_list<?php echo $a ?>" onChange="removeDriver()">
<option value=''>Select</option>
<?php foreach ($driver as $d){?>
<option value="<?echo trim($d['DRIVER_NUMBER']);?>"
<?php echo ($driver == $d['DRIVER_NUMBER']) ? "selected" : ''?>>
<?php echo trim($d['DRIVER_NUMBER']) . ' - ' . $d['FIRST_NAME'] . ' ' . $d['LAST_NAME']?>
</option>
<?php } ?>
</select>
</td>
<td class="right"><?php foreach ($route['action'] as $a) { ?>
[ <a href="<?php echo $a['href']; ?>"><?php echo $a['text']; ?></a> ]
<?php } ?>
</td>
</tr>
<?php } ?>
Lets say I have 6 routes going out tomorrow and I have 12 drivers to choose from. I want to create a function that removes the value selected from the current list from the next dynamically generated list. Initially every list will have 12 drivers. When a driver gets 'assigned' a route, the remaining 5 lists will have 11 drivers to choose from, with the selected driver getting removed. So on, and so on. The idea here is that only 1 driver can be assigned a route. I have the same dynamically generated list for vehicles and would need to apply the same type of logic.
I added the following function(s) to disable/highlight the selected values in my lists. I also modified the php and html to:
var a = <?php echo $a; ?>;
function removeDriver(){
var x = document.activeElement.value;
for(i=0; i<a; i++){
var elemname='driver_list'+ i;
if (elemname !== document.activeElement.id) {
if (x != ''){
var y = document.getElementById(elemname).options;
for(z=0; z<y.length; z++) {
if(y[z].value == x){
y[z].disabled=true;
y[z].style.color = 'red';
y[z].style.background = 'grey';
}
}
}
}
}
}
This works to interact with the other lists. However, I want to re enable the options when a user changes their mind.