select element customization

[guest2013-1]

Hi guys,

Was surching the intarwebs for answers but can't really find any...

I'd like to customize the select element so that it displays two (or more) columns when I click the little drop down button.

But how?

I want to display in a (nicely) formatted way:

Code | Description | Date Updated (for example) instead of just one long list of descriptions

any ideas?

if it's jquery you get a noddy badge too...

 

[Drake2007]

Not quite what you're after but maybe this will spark.

http://mondaybynoon.com/2009/02/23/creating-custom-form-elements-using-jquery-selects/

 

[guest2013-1]

Thanks for the link, I know I can style the select box to make it look pretty. I'm not really a "lets make this look pretty" kind of guy, really just after functionality. So I Paint'ed a quick image together to show you what I mean.

I know this is possible because I've seen it before. Just can't think of the name or how to google it as most folk points to the "making it bootifeul" bit instead of the functionality of having the select box like that.

any help would be appreciated!

 

[Drake2007]

targetselect.find('option').each(function()
{
// add the option
options += '<li><a href="#"><span class="value">' + $(this).text() + '</span
....

I kinda got the idea that code in there overwrites the values in the select box?

 

[Drake2007]

found something else maybe closer to what you're after.

http://www.avoka.com/click-examples/ajax/ajax-select.htm

 

[guest2013-1]

targetselect.find('option').each(function()
{
// add the option
options += '<li><a href="#"><span class="value">' + $(this).text() + '</span
....

I kinda got the idea that code in there overwrites the values in the select box?

Nope, you'll see that he defines 2 "select" boxes. One is the HTML element <select> and the other is a <div> & styled one he created himself. He then goes ahead and replaces the normal one with the enhanced version. You're then able to basically replace (id=option) html with anything inside.

You can't have HTML within the <option /> tag of the normal html element.

It's a great example of what can be done and how to gracefully degrade. Because browsers without JavaScript are still able to enjoy the drop down's functionality but without the "enhancement"

Thanks for the other example, I'm pretty sure I've seen this years back before AJAX and even jQuery (or when both weren't popular or the new buzzword and back when IE6 were still cool, that's IF it was ever...)

 

[Drake2007]

Multi-column select box

Maybe sometimes it's simpler than we thought?

Jquery Multi Column Select Box

 

[guest2013-1]

Thanks.... I don't think there's going to be a solution for the normal HTML select element...

 

[Drake2007]

Thanks.... I don't think there's going to be a solution for the normal HTML select element...

Agree that first link is incorrect.

Check the 2nd one which uses a <div> jquery and a table to sort out the formatting instead of <select>.

 

[FarligOpptreden]

Thanks.... I don't think there's going to be a solution for the normal HTML select element...

Exactly. The normal HTML select tag has functionality limited to 1 column. All the other instances you see on sites have custom controls created with divs and tables or even list items, operated using a bit of client scripting...

 

[guest2013-1]

Exactly. The normal HTML select tag has functionality limited to 1 column. All the other instances you see on sites have custom controls created with divs and tables or even list items, operated using a bit of client scripting...

I was pretty sure there was a solution for it a couple of years back ... but yea... maybe I'm going insane in my old age

 

[FarligOpptreden]

Your old age of... what, around mid to upper 20s?

(oh, I'm younger than you! )

 

[guest2013-1]

I started going insane when I started getting grey, and that was in my late teens...