if then esle optimization

[blaze4218]

The following is inside a loop:

 store1 = (Employees[i][3]==1)?'selected="true"':'';
 store2 = (Employees[i][3]==2)?'selected="true"':'';
 store3 = (Employees[i][3]==3)?'selected="true"':'';
 store4 = (Employees[i][3]==4)?'selected="true"':'';

 myTable+=	'<td><select  id="store' + i + '" onchange="" style="color:'+color1+' ; width:125px ; height:35px" >'
			+'<option  ' + store1 + ' value="1">Pasadena</option>'
			+'<option  ' + store2 + ' value="2">Alvin</option>'
			+'<option  ' + store3 + ' value="3">Angleton</option>'
			+'<option  ' + store4 + ' value="4">Bay City</option>'
		+'</select></td>'

I originally came up with the idea in a similar part of the app that allowed choosing between employees and would ideally prefer something similar:

  function BUILD_EMP_SELECTOR(){
    empSelector = '<select id="empSelect" onchange="UPDATE_EMP();">';
    for (i=1 ; i<AllEmployees.length ; i++){
     Booleanselect = (i==me)?'selected="true"':'';
     empSelector += '<option  ' + Booleanselect + ' value="' + i + '">' + AllEmployees[i] + '</option>';
    }
    empSelector += '</select>';
    ID('employee').innerHTML = empSelector;
   }

The problem I'm having is that I would like to optimize the part of the first code that chooses which store a particular employee is at.
I've also come up with this, but I'm not sure if its the best solution, or if it's even any better than my first:

      store1=store2=store3=store4='';sel='selected="true"';
      Employees[i][3]==1&&(store1=sel);
      Employees[i][3]==2&&(store2=sel);
      Employees[i][3]==3&&(store3=sel);
      Employees[i][3]==4&&(store4=sel);

Also, while I would have to hard code additional stores +'<option ' + store5 + ' value="5">Elsewhere</option>' I would rather not have to add an additional "else if store5=" if possible.
I know this is mostly code, and not much question, but what I'm looking for is mostly your opinions/recommendations...

[Old Pedant]

Like this?

var stores = [ null,"Pasadena","Alvin","Angleton","Bay City"];

myTable += '<td><select name="store' + i + '" class="select' + i + '">';
for ( var s = 1; s < stores.length; ++s )
{
    var sel = Employees[i][3] == s ? "selected" : "";
    myTable += '<option  ' + sel + ' value="' + s + '">' + stores[s] + '</option>';
}
myTable += '</select></td>'

Presumably, you will wrap that with a loop on variable i, to pick up all employees??

I took the liberty of changing your inline style to a class. But you can of course change it back.

[blaze4218]

I wish I could change to a class, but you would have to take int consideration the entire loop:

    j=1;q=0;
    for (i in Employees){
     if(fromServer){
      Employees[i] = Employees[i].split('.');		<%/* BREAK EACH [EMP,PASS,STAT] PAIRING INTO SUB ARRAY */%>
      Employees[i][0] = Employees[i][0].split(' ');
      }
     empStat = (Employees[i][2])?(Employees[i][2]=='ft')?'Full Time':'Part Time':'Not Employed';
     if(Employees[i][2]||ID('showAll').checked){
      color1=(Employees[i][2])?"black":"red";colors=[4];
      j=j*-1;
      colors[0]=colors[1]=colors[2]=colors[3]=color2=(j==1)?'white':'#AAAAAA';
      q++;
      
      if(ChangedInputs){				<%/* CHECK FOR CHANGES THAT HAVEN'T BEEN SAVED YET */%>
       for(incr in ChangedInputs){			<%/* THIS WILL LOOP THROUGH ChangedInputs AT EVERY OBJECT IN Employee, IT SEEMS KIND OF EXPENSIVE ON RESOURCES, BUT I COULDN'T FIND A BETTER WAY TO SET THE COLORS HERE TO OVERRIDE THEIR DEFAULT VALUES... */%>
        temp = ChangedInputs[incr].split('.');
        if(temp[1]==i){
         colors[temp[0]]='#ff9999';
         }
        }
       }
      store1=store2=store3=store4='';sel='selected="true"';
      Employees[i][3]==1&&(store1=sel);
      Employees[i][3]==2&&(store2=sel);
      Employees[i][3]==3&&(store3=sel);
      Employees[i][3]==4&&(store4=sel);


      store1 = (Employees[i][3]==1)?'selected="true"':'';
      store2 = (Employees[i][3]==2)?'selected="true"':'';
      store3 = (Employees[i][3]==3)?'selected="true"':'';
      store4 = (Employees[i][3]==4)?'selected="true"':'';
      empTable	+='<tr style="color:' + color1 + ' ; background-color:' + color2 + '"><td>ID</td><td>First Name</td></tr><tr style="background-color:' + color2 + '"><td>'					<%/* this is kinda hard to space logically, but I gave it a try... */%>
      		+ '<input autocorrect = "off" type="tel" id="idnmbr' + i 
      			+ '" onblur="CHECK_ID_AVAILABILITY(this.value,' + i + ');" '
      			+'onchange = "ID(\'toggleTagz\').style.display = \'\'; this.style.backgroundColor = \'#ff9999\';" '
      			+'value = "' + Employees[i][1] + '" '
      			+ 'style = "color:' + color1 + ' ; background-color:' + colors[0] + ' ; font-size:30px ; width:90px" />'
      		
      		+ '</td><td>'
      		+ '<input autocorrect = "off" autocapitalize = "off" '
      			+ 'style = "color:' + color1 + ' ; background-color:' + colors[1] + ' ; font-size:30px ; width:300px" '
      			+ 'onchange = "this.value = this.value.replace(/[^A-Za-z]/gi,\'\'); this.style.backgroundColor = \'#ff9999\'; UPDATE_EMPLOYEE(' + i + ',1,this.value);" '
      			+ 'mousedown=""'
      			+ 'value = "' + Employees[i][0][0] + '">'
      		 
      		+ '</td></tr><tr style = "color:' + color1 + ' ; background-color:' + color2 + '"><td>Status</td><td>Last Name</td></tr><tr style = "background-color:' + color2 + '"><td id="status' + i + '" style = "background-color:' + colors[3] + '">'
      		+ '<button style="color:'+color1+' ; width:125px ; height:35px" onclick="CHANGE_EMP_STATUS(' + i + ');">' + empStat + '</button>'
      		
      		+ '</td><td>'
      		+ '<input autocorrect = "off" autocapitalize = "off" '
      			+ 'style = "color:' + color1 + ' ; background-color:' + colors[2] + ' ; font-size:30px ; width:300px" '
      			+ 'onchange = "this.value = this.value.replace(/[^A-Za-z]/gi,\'\'); this.style.backgroundColor = \'#ff9999\'; UPDATE_EMPLOYEE(' + i + ',2,this.value);" '
      			+ 'value = ' + Employees[i][0][1] + '>'
      		
      		+ '</td></tr><tr style = "color:' + color1 + ' ; background-color:' + color2 + '"><td>Store</td><td></td></tr><tr style = "background-color:' + color2 + '"><td style ="background-color:' + colors[3] + '">'
      		+ '<select  id="store' + i + '" onchange="" style="color:'+color1+' ; width:125px ; height:35px" ><option  ' + store1 + ' value="1">Pasadena</option><option  ' + store2 + ' value="2">Alvin</option><option  ' + store3 + ' value="3">Angleton</option><option  ' + store4 + ' value="4">Bay City</option></select>'
      		
      		+ '</td><td>'
      		+ ''
      		
      		+ '</td></tr>';
      }
     }
    ID('PleaseWait').style.display = 'none'
    empTable += '</table>';
    ID('allEmployees').innerHTML = empTable;
    ID('all').style.height = baseLineHeight + (q * tableHeight) + tableAddOnHeight + 'px';
    }

but your example looks spot on, I'm going to try it right now

Edit:
To Clarify, there *would be* like 6 permutations of classes to choose from, if you could improve upon it you would have my gratitude ( and a "Thanks" click )

[blaze4218]

Originally Posted by Old Pedant

Like this?
Presumably, you will wrap that with a loop on variable i, to pick up all employees??
.

It is... From my original post:

The following is inside a loop:

[blaze4218]

Yep you got it! I guess I was just being lazy
But I like how you snuck in that [null] to make the array work!