-1

I have a drop down box in a jsp page like: Select |__|▼| which having the following values:

  1. apple
  2. Mango
  3. Banana.

Now I call a java script function through a text box onblur event. In that function can I display that drop down box view like this: 

Select |_____|▼|
       |apple  |
       |Mango  |
       |Banana |

(Instead of clicking the ▼ button can make the view of the drop down box like selecting in jsp)

neubert
  • 15,947
  • 24
  • 120
  • 212
user1992331
  • 1
  • 2
  • What have you tried? Yes, you definitely can. Search for how to write a `select` tag in html. – nunespascal Jan 19 '13 at 05:51
  • Can you please tell me in details or paste same example –  Jan 19 '13 at 05:54
  • You are asking how to use a select element? – epascarello Jan 19 '13 at 05:59
  • Unfortunately there is no direct option for that. You will have to simulate a select box.. :( – Wolf Jan 19 '13 at 07:43
  • Duplicate of [Show select dropdown in jQuery?](http://stackoverflow.com/questions/6992639/can-i-open-a-selectbox-with-javascript). Explanaition also mentioned inthat question: [How do you open a select box with JavaScript?](http://solidlystated.com/scripting/open-select-box-with-javascript/). – try-catch-finally Jan 19 '13 at 09:39
  • I suspect opening the drop down on blur of another field is good user experience. If the user blurs that field using the tab key she/he might give the drop down foucs which enables her to navigate the items using the up/down keys. You should of course [order the items' index](http://www.w3.org/TR/html4/interact/forms.html#h-17.11) to archieve this. If you need to point the user to that drop down you shoud show a hint next to it. Lastly, if you really want to do this, nunespascal's answer seems OK to me. – try-catch-finally Jan 19 '13 at 09:46

1 Answers1

1

Normal selects cannot be expanded in javascript. However you can use a multi-select to achieve this behavior.

Like this:

<select id="test" multiple="multiple" size=1
        onFocus="this.size = 3;" 
        onBlur="this.size = 1;">
  <option >apple</option>
  <option >mango</option>
  <option >banana</option>
</select>

Take a look at this live demo.

nunespascal
  • 17,584
  • 2
  • 43
  • 46