0

Is it possible to show the description of a select list inside the actual select list? When the select list is clicked, the description should disappear and show the list.

example:

<select description="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

http://jsfiddle.net/auMPm/

I would like to have the word "Cars" inside the select box and when it's clicked it should disappear and show the select list.

I know this is possible for text input fields, could this ne achieved with the select-tag? Probably with jquery?

Edit: "Placeholder" was the magic word. This topic deals with it: How do I make a placeholder for a 'select' box?

Edit2: apparently somebody posted an even better solution to my question, but deleted his answer... strange. I was lucky enough to link to the jsFiddle in time :)

http://jsfiddle.net/hxr3P/3/

Community
  • 1
  • 1
Roddeh
  • 207
  • 1
  • 6
  • 19
  • Correct me if I am wrong. Initially you want the car to be the only option in the select list and when clicked, the four options will be available and car option will be disappeared from the list. – Tariqulazam Nov 08 '12 at 19:44
  • 1
    You're talking about the placeholder attribute, which isn't used on the select by default. Take a look at the chosen or select2 plugins for that kind of functionality. – Mike Robinson Nov 08 '12 at 19:44
  • Exactly, thats what I want it to look like, yes. – Roddeh Nov 08 '12 at 19:45
  • I would think you also need something to reverse the effect – Huangism Nov 08 '12 at 19:47

3 Answers3

0

Add new attribute to select tag

 <select id='ddl' desc="this is description" >
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>

get that attribute using jquery

$(document).ready(function() {
   var val=$('#ddl').attr('desc').val();
     alert(val);
 })​
Ankush Jain
  • 5,654
  • 4
  • 32
  • 57
0

Here's a solution using ExtJs:

http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/form/forum-search.html

ExtJS can be messy to implement but its incredibly powerful, take a look at it.

(in the example type 'forms' and it will show what I think you're looking for)

ContextSwitch
  • 2,830
  • 6
  • 35
  • 51
0
var val = $('#ddl').attr('description');

Are you sure that select has a description attribute?

That should work haven't tried it myself. Hope it helps good luck.

riceman
  • 38
  • 5