We help IT Professionals succeed at work.

HTMLDropdownn_List_design

sam15
sam15 asked
on
I have an HTML dropdown select list for a list of translators (last name, first name) associated with a vendor code sorted by last name.


The list is generated dynamically based on a database table.

When a vendor "XYZ" logs in, the list shows all translators who work for "XYZ".

Now, i need to add another commercial list of translators associated with fake vendor code of "COMRL".

I would like to show user that the name is associated with specific vendor code.

Can I color code this small list of commerical names? or is there a way to separate the lists by a dividor and have two lists showing.

or would you just print the vendor code with each translator name.

Any good ideas or good practices for this requirement?
Comment
Watch Question

Lee WadwellProject Architect
CERTIFIED EXPERT

Commented:
How are you building the lists?  Provide an example (with dummy names) of the HTML etc.  I would imagine that the colouring could be done using CSS with a different class per company on the list values.
Is the colouring just a visual reminder of the differing companies? ... is the user expected to know the colour code? ... is the company significant to the user?
Scott FellDeveloper & EE Moderator
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013

Commented:
Please don't use this code as is.   This is just for an idea.   You will simply create a css class for your usernames and dynamically add the class on to the ul on the fly.  From there you can style the ul and li as you like.

<style>
.username {background-color:red}
</style>

<ul class=<%rs("user")%>>
<% do until rs is end of file %>
<li><%rs("name")%></li>
<% rs move to next record and loop %>
</ul>

Author

Commented:
My goal is to have one list but includes separate group of values.

For exampl,e if you have a dropdown lists of cars and you want to list DOEMSTIC and the FOREIGN can you have a label option for that

<select>
  <option value="Ford">Ford</option>
 <option value="GM">General Motors</option>

  <option value="saab">Saab</option>
  <option values="mercedes">Merceded</option>
  <option value="audi">Audi</option>
</select>

Shall i use <OPTGROUP LABEL="DOMESTIC"> to show list of domesti cars sorted and then another group for FOREIGN. I beleive those will be displayed but cant be select by user

any good ideas.
Project Architect
CERTIFIED EXPERT
Commented:
The <optgroup> method sounds good to me.  Yes they cannot be selected themselves.  You can still use CSS on these too.  There is also the 'title' attribute for <option> elements that gives a hovering tooltip type message.

It really comes down to usability and style preferences.  But I do prefer to make things obvious to the user where I can - so I like the <optgroup> idea.

Here is some example html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Quick Test</title>
<style type="text/css">
* {
    font-family: Arial;
}
optgroup {
    background-color: #D6DEEB;
    color: #1F3A58;
}
.domestic {
    background-color: #7FAAFF;
}
.foreign {
    background-color: #FFD4D4;
}
</style>
</head>
<body>

    <form>
        <select>
            <option class="domestic" value="Ford">Ford</option>
            <option class="domestic" value="GM">General Motors</option>

            <option class="foreign" value="saab">Saab</option>
            <option class="foreign" value="mercedes">Mercedes</option>
            <option class="foreign" value="audi">Audi</option>
        </select>
        <select>
            <optgroup LABEL="domestic">
                <option value="Ford">Ford</option>
                <option value="GM">General Motors</option>
            </optgroup>

            <optgroup LABEL="foreign">
                <option value="saab">Saab</option>
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
            </optgroup>
        </select>
        <select>
            <option title="Domestic" value="Ford">Ford</option>
            <option title="Domestic" value="GM">General Motors</option>

            <option title="Foreign" value="saab">Saab</option>
            <option title="Foreign" values="mercedes">Mercedes</option>
            <option title="Foreign" value="audi">Audi</option>
        </select>
    </form>

</body>
</html>

Open in new window

Author

Commented:
The colors do not see to be working

How can i get a backgroud color just for the optgroup label.
Lee WadwellProject Architect
CERTIFIED EXPERT

Commented:
What browser are you using?

The colors were only on the first drop down ... they are working for me.  The CSS for them was:
.domestic {
    background-color: #7FAAFF;
}
.foreign {
    background-color: #FFD4D4;
}

For colors only on the <optgroup> I have discovered that for IE to work, you need to specify the optgroup and option CSS, so:
optgroup {
    background-color: #D6DEEB;
    color: #1F3A58;
}
option {
    background-color: white;
    color: black;
}

Explore More ContentExplore courses, solutions, and other research materials related to this topic.