asked on

javascript dropdown list boxes

I have the following scenario.
Dropdownlistbox(dd1) is populated with 2-3 digit abbreviation of states.
when dd1 is expanded then full name of state is to be displayed.
Once selection is made need to revert back to 2-3 digit abbreviation.

I'm looking at accomplishing this using two dropdown list boxes and by
using div tags.

However, I'm not quite sure how the 2 dropdown list boxes will communicate
with each other -- ideas is to minimize postbacks so would need
to use javascript.

The challenge would be to communicate from the dropdown list box
that has the full name of states to the dropdown with the abbreviated
state names, and showing and hiding the 2 dropdowns using javascript.

Any code examples in javascript that would be compatible across browsers
would be very helpful.

thanks

hielo

>>Dropdownlistbox(dd1) is populated with 2-3 digit abbreviation of states.
Since you already have the abbreviated names, do you have a list of the full names somewhere, like an array or some hidden div?

sanagarwl

ASKER

yes, plan on having another dropdown list box which will have the correspondind list of full names of states -- challenge will be communicate between the dropdown list boxes - so once the full version is selected then the abbreviated one gets selected and the full version dropdown is now hidden. So when the abbreviated dropdown is shown then full version is hidden.

essentially there are quite a few textboxes and dropdown listboxes and the idea here is to save on real estate, and expand the drodown list boxes only when the user shifts focus to it or expands it...

scrathcyboy

DD list 1 -- onChange show DD list 2, hide DD list 1

code and javascript below. You can also try the onClick function on the DIV, but I think what you really want to do is only when the options list arrow is clicked, then you want it to expand. If you want the wide list to show only when a state is selected, use onChange() instead of onClick().

Also you will want to use either relative or absolute positioning to get the DIVs in the same place.
See this link for details -- it does what you want too
http://www.devx.com/tips/Tip/13638


<DIV id="DD1">
<select onClick="showHide(1)">
<option>CA</option>
<option>CO</option>
<option>CT</option>
</select>
</DIV>
 
<DIV id="DD2" onClick="showHide(2)">
<select>
<option>California</option>
<option>Colorado</option>
<option>Connecticut</option>
</select>
</DIV>
 
javascript --
 
showHide(list) {
 
if (list==1)  {
 document.DD1.style.display="none";  document.DD1.style.visibility="visible";
     document.DD2.style.display="block"; document.DD2.style.visibility="visible";
     }
if (list==2)  {
    document.DD2.style.display="none"; document.DD2.style.visibility="visible";
     document.DD1.style.display="block"; document.DD1.style.visibility="visible";
     }
 
}

Open in new window

ASKER CERTIFIED SOLUTION

glcummins

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

sanagarwl

ASKER

glcummins/scrathcyboy:

thank you for your responses - in firefox the dropdowns opens below the first item of the dropdown when one expands the selection when clicking on the down arrow.

I need to mimic this default behavior of Firefox on IE and that would solve the issue of width constraint.

Essentially, the dropdown and textboxes are at the top of the page and are part of the search/advance search component and as long as the dropdownlist expand below the bottom margins of the dropdownlist/textboxes then every thing would be okay.

thank you very much for your response.

glcummins

That is a built-in behavior in IE, and I am not sure it can be overridden. I will check and get back to you.

scrathcyboy

You can't reposition where the select list begins or its offset either down or from left to right. That is totally controlled by the CSS styling you give to the list box, and there is quite a bit you can do in this regard, you should explore various paddings and margins, etc, as well as styling the background of the list box to look exactly like the BG of the page it is going into --- that way, the position is not so crucial, as it "blends in".

Did you at least try what I did above? It should completely replace a narrow list box with a wider one on click. All you have to do is size the DIVs and position them. I thought that is what you wanted to do in the original question? What has changed now?

sanagarwl

ASKER

scrathcyboy:

thanks for your response:

<Did you at least try what I did above?...> I did try your solution, however the user experience is not fluid and the behaviour is not consistent across browsers. It was possible for me to say dbl click and then only the abbreviated codes would show rather than the full desciption and vice-versa.

SOLUTION

scrathcyboy

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

sanagarwl

ASKER

scrathcyboy:

thanks for the response - will try CSS styling, the request is from the client and they would like to have a consistent user experience across browsers.

Being a framework/middle tier professional the javascripting work is turning out to be some thing of a challenge for me ...

scrathcyboy

"consistent user experience across browsers."

Then work on CSS styling that you can add as a separate CSS file to all pages on their site, that is better to be consistent than javascript.