Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

HTMLDropdownn_List_design

Posted on 2012-08-15
6
Medium Priority
?
391 Views
Last Modified: 2012-09-01
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?
0
Comment
Question by:sam15
  • 3
  • 2
6 Comments
 
LVL 25

Expert Comment

by:lwadwell
ID: 38299096
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?
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 38299130
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>
0
 

Author Comment

by:sam15
ID: 38300457
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.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 25

Accepted Solution

by:
lwadwell earned 2000 total points
ID: 38300609
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

0
 

Author Comment

by:sam15
ID: 38302178
The colors do not see to be working

How can i get a backgroud color just for the optgroup label.
0
 
LVL 25

Expert Comment

by:lwadwell
ID: 38303186
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;
}
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

577 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question