multi variable drop down

[techris]

In a php script I have built, I have a drop down menu which each option is populated by the variable name and then the variable type. This works well, however, my client would like the variable names to all show up left aligned, and the variable types to be aligned as well for clarity of viewing.

If I could make each <option> a table row, I could make this happen thus..

<select name="select">
<option value="first val"><table><tr><td align="left">variable name1</td><td align="left">variable type1</td></tr></table></option>
<option value="second val"><table><tr><td align="left">variable name2</td><td align="left">variable type2</td></tr></table></option>
<option value="third val"><table><tr><td align="left">variable name3</td><td align="left">variable type3</td></tr></table></option>
</select>

Of course this won't work, but it illustrates what I am trying to do.

Can javascript offer me anything that could handle this?

Thanks!

 

[BabyJeffy]

No can do. This (menu item alignment) is something that is controlled by the browser and out of your control.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[monksnake]

I have done an example of what you want, it involved dynamically creating the menu items and adding spaces between the elements of the menu item. I used a fixed font and for every one font space needed, I added two &nbsp;'s.

This was done using jscript ASP.

                  <select id="muValue" onchange="grabAgentList()">
                     <%
                        var initialMuID = String(oRS.Fields('mu_id').value);                        
                        while (!oRS.EOF) {
                           muName = String(oRS.Fields('mu_name').value);
                           muID = String(oRS.Fields('mu_id').value);                        
                           printMuID = String(oRS.Fields('mu_id').value);
                           printLength = 5 - printMuID.length;
                           for (a = 0; a < printLength; a++) {
                              printMuID += "&nbsp;&nbsp;";
                           }
                           %>
                              <option value="<%=muName%>|<%=muID%>"><%=printMuID%><%=muName%></option>
                           <% 
                           oRS.MoveNext;
                        }
                     %>
                  </select>

<.

 

[BabyJeffy]

Nice solution

Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[techris]

I appreciate your help. I am not familiar with jscript ASP. I can't seem to get this to work for me. Can you help me grasp what you did here?

What would help the most is if you could demonstrate it with some generic data in it.

Just for fun..

Names:
george
tom
alexander
jd

ID's:
123
1234
12
125


Thanks again!

 

[techris]

Can anyone add just one variable to this so that I can see how it works. I can create my own loop that will populate it.

Thanks.

 

[monksnake]

Sorry about not responding sooner, I was AWOL from work yesterday.

I'll show you a client-side example of one option added like what I have above.

function buildDD(selectObj) {
   selectObj.length = 0;
   //Assume firstValue's largest length is 7
   var firstValue = document.getElementById("blah").value;
   var printFirstValue = document.getElementById("blah").value;
   var secondValue = document.getElementById("blah2").value;
   //Assume I want (at least) 2 spaces between the first "column" and second "column" in the dropdown menu.
   var printLength = 9 - printFirstValue.length;
   //Loop here adding spaces (2   for every one font space) until the length of printFirstValue is 9 
   for (a = 0; a < printLength; a++) {
      printFirstValue += "&nbsp;&nbsp;";
   }
   selectObj.options[0] = new Option(printFirstValue + "" + secondValue, firstValue + "|" + secondValue);
}

BTW, thanks Jeffy.

<.