Last post Jan 10, 2007 08:20 PM by e_screw
Jan 10, 2007 05:59 AM|Mehdi6002|LINK
Just before submitting this I searched one more time but didn't find an answer or working sample, so hope one of you would be able to help me :)
How can I have a small image beside each item of asp.net dropdown list.
I appreciate all your helps in advance.
asp.NET 2.0 C#
Jan 10, 2007 06:28 AM|Jessica Cao - MSFT|LINK
here is the article
http://webfx.eae.net/dhtml/select/jsGenerated.html solve this problem
Added an Object Model Reference with an interactive test page.
This sample creates a selectbox that works almost identically to the
topArray = new Array();
topArray = new Option(' WebFX Home', "http://webfx.eae.net");
topArray = new Option(' EAE.net', "http://www.eae.net/");
topArray = new Option(' InsideDHTML', "http://www.insideDHTML.com");
writeSelectBox(topArray, "select2", 1, "window.open(this.options[this.selectedIndex].value, '_top')", "margin-left: 10; width: 140;");
<div class=option value="http://webfx.eae.net"> WebFX Home</div>
This was designed to be backward compatible with old browsers. If you dont have IE it writes out an ordinary select box.
To the left there is an "image" showing how the selectbox was designed. Outmost there is a container that contains the two other containers. One is for the selected and the down button and the other contains the options. The lower one is hidden when the size of the select box isn't set (or set to 1) and is displayed when clicking the down button. If you set the size of the textbox to a larger value than 1 you'll only have the lower container.
There are basically two ways of building the menu. First you can write all the containers by yourself or you can use the generator function (much easier but not as flexible).
Follow this linkto view one with where all the containers are included. this also show some alternativ layout
<link type="text/css" rel="STYLESHEET" href="classic.css">
After this you create an array of options like this:
optionArray = new Array();
optionArray = new Option("Item 1", "value 1", "color: blue; text-decoration: underline;");
optionArray = new Option("Item <b>2</b>", "value 2");
optionArray = new Option("Item 3", "value 3, "color: red", "selected"");
optionArray = new Option("Item 4", "value 4");
optionArray = new Option("Item 5", "value 5");
Then you initiate the select box. It will be display at the current position so this shoul be done in the body:
writeSelectBox(optionArray, "select1", 1, "alert(this.options[this.selectedIndex].value)", "margin-left: 10");
The first argument is the the list with options (this is the only needed argument). The second is the id the of the selectbox (this should be added for better performanc). The third is the size. Setting this to more than one results in another type of select
box and The forth is the action to do on change. You can also add a fifth argument that si a string with CSS values (like this "position: absolute; top: 100px;"). I really recomend that you change in the css file instead because this allow you to edit all
The above script result in the following selectbox.
<div class=option style="COLOR: red" value="value 3" selected>Item 3</div>
Below is the same select box with size set to 3
Jan 10, 2007 09:39 AM|e_screw|LINK
You can check the one from http://www.obout.com
and another interesting from Peter EasyListBox
Jan 10, 2007 07:49 PM|PeterBrunone|LINK
Thanks, e-screw; here's a
direct link to the relevant demo.
Jan 10, 2007 08:20 PM|e_screw|LINK
The direct link in peter's post is not working, may be a typo. Here's is the correct
directLink to the relevant demo of EasyListBox.