View Full Version : dropdown question again

12-08-2006, 02:34 AM
Morning guys,
I am trying to get the longest width among all the <select>. After which,
I will apply this longest width to all the <select>s so that they all look beautifully/uniformly on screen. This is only one of the hundred screens that I'm going to change to standardize all the <select> width.

But now, the screen looks really awful, can any1 offers some help here? Coding is greatly appreciated ! :D

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<table class="tabbox" border=0 cellpadding=0 cellspacing=1 width="100%">
<td width="20%" class="FormBlockLabel"> Channel<font color='#FF0000'>*</font>
<td width="28%" class="FormBlockRow"> <select size='1' >
<option value='' ><-- Any --></option>
<option value='M5'>M5 - BC-ADMIN</option>
<option value='A1'>A1 - BC-ALABANG TOWN</option>
<option value='A2' selected >A2 - BC-ALI MALL LINK</option>
<option value='A3'>A3 - BC-ANGELES</option>
<option value='M3'>M3 - BC-AREA HEADS</option>
<option value='M2'>M2 - BC-AVENIDA</option>
<option value='A4'>A4 - BC-BACOLOD</option>
<option value='A5'>A5 - BC-BAGUIO</option>
<option value='A6'>A6 - BC-BALANGA</option>
<option value='A7'>A7 - BC-BINONDO LINK</option>
<option value='A8'>A8 - BC-BUTUAN</option>
<option value='A9'>A9 - BC-CABANATUAN</option>
<option value='B1'>B1 - BC-CAGAYAN DE O</option>
<option value='B2'>B2 - BC-CALAMBA</option>
<option value='M7'>M7 - BC-CALAPAN</option>
<option value='N2'>N2 - BC-CALBAYOG</option>
<option value='B3'>B3 - BC-CALOOCAN</option>
<option value='B4'>B4 - BC-CANDON</option>
<option value='B5'>B5 - BC-CDO LIMKETKAI</option>
<option value='B6'>B6 - BC-CEBU AYALA</option>
<option value='B7'>B7 - BC-COTABATO</option>
<option value='B8'>B8 - BC-DAGUPAN</option>
</select> </td>
<td width="27%" class="FormBlockLabel">Quick-Path </td>
<td width="25%" class="FormBlockRow"> <input type="text" value='' maxlength="3" size="8" >
<td class="FormBlockLabel">Mode<font color='#FF0000'>*</font> </td>
<td class="FormBlockRow"> <select size='1' >
<option value='' ><-- Any --></option>
<option value='CI'>CI - CALL IN</option>
<option value='CO'>CO - CALL OUT</option>
<option value='EM'>EM - EMAIL</option>
<option value='FX'>FX - FAX</option>
<option value='IN'>IN - INHOUSE INQ</option>
<option value='LT'>LT - LETTER</option>
<option value='WI' selected >WI - WALK IN</option>
</select> </td>
<td class="FormBlockLabel"> Group<font color='#FF0000'>*</font> </td>
<td class="FormBlockRow"> <select size='1' >
<option value='' selected><-- Any --></option>
</select> </td>
<td class="FormBlockLabel"> Contact<font color='#FF0000'>*</font> </td>
<td class="FormBlockRow"> <select size='1' onclick="" disabled >
<option value='' selected><-- Any --></option>
<option value='CA'>CA - CASE</option>
<option value='FU'>FU - FOLLOW-UP</option>
<option value='IQ'>IQ - INQUIRY</option>
<option value='MO'>MO - MODIFICATION</option>
<option value='WO'>WO - ORDER MANAGEMENT</option>
<option value='PR'>PR - PROSPECT RELATED</option>
<option value='SL'>SL - SALES LEAD</option>
</select> </td>
<td class="FormBlockLabel"> Txn <font color='#FF0000'>*</font> </td>
<td class="FormBlockRow"> <select size='1' >
<option value='' selected><-- Any --></option>
</select> </td>

var longestOffset = 0;
var a = document.getElementsByTagName("select");
for(var i=0; i<a.length; i++){//Search for the longest dropdown width of the current screen
var selectObj = a[i];
if(selectObj.offsetWidth > longestOffset){
longestOffset = selectObj.offsetWidth;
}//end for

for(var i=0; i<a.length; i++){//Set all dropdown width to the longest offset found
var selectObj = a[i];
selectObj.style.width = longestOffset+"em";
}//end for