problem with multiple select list

[cajchris]

Hi,

what i basically need is a drop down menu in which you can select multiple items. maybe even have the drop down contain check boxes for this. Because standard html drop down menu's become long lists when you use the "multiple" keyword.

any ideas?

regards
chris

 

[dwarfthrower]

Yep, scrolling div tag - as you said, populate it with checkboxes and you have a select-type control that doesn't requre you to develop carpal tunnel syndrome holding down the ctrl key selecting multiple items.

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}

 

[BabyJeffy]

Use the standard html drop down menu - that's what it's there for.

If you really really wanted something like a regular dropdown with, say, ticks beside the selected item -- then you will have to roll your own... and you will be forcing your users to have javascript enabled to use your customised code.

You could take a visit to dynamicdrive.com and see if they have any custom-written scripts that might work for you.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

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

[/tt]

 

[cajchris]

thanks dwarfthrower, but i am a relative newbie at this. do u know of any good example sites showing this scrolling div tag with checkboxes?

cheers
chris

 

[BabyJeffy]

Smart thinking, dwarfthrower. You can pull off your solution using CSS alone (making the container overflow:auto or something). Very nice.

Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

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

[/tt]

 

[dwarfthrower]

No, I'm not aware of any sites dealing with the technique... It's just how I'd go about - as Jeff put it - rolling my own.

If you just set up a div tag with the appropriate CSS you'll get an appreciation for where I'm headed:

<style>
.scrollingDiv {
 height: 100px;
 width:
 overflow: auto;
 background-color: #eeeeee;
 border: 2px inset #aaaaaa;
}

.scrollingDiv DIV {
 border: 1px solid #aaaaaa;
}
</style>

Then use these to assign the properties to your html:

<div class='scrollingDiv'>
<div><input type='checkbox' /> Option one</div>
<div><input type='checkbox' /> Option two</div>
<div><input type='checkbox' /> Option three</div>
<div><input type='checkbox' /> Option four</div>
<div><input type='checkbox' /> Option five</div>
<div><input type='checkbox' /> Option six</div>
<div><input type='checkbox' /> Option seven</div>
<div><input type='checkbox' /> Option eight</div>
<div><input type='checkbox' /> Option nine</div>
<div><input type='checkbox' /> Option ten</div>
</div>

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}

 

[cajchris]

cheers dwarfthrower. much appreciated

regards
chris