• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Liutauras Vilda
  • Bear Bibeault
  • Jeanne Boyarsky
  • Tim Cooke
Sheriffs:
  • Knute Snortum
  • Junilu Lacar
  • Devaka Cooray
Saloon Keepers:
  • Ganesh Patekar
  • Tim Moores
  • Carey Brown
  • Stephan van Hulst
  • salvin francis
Bartenders:
  • Ron McLeod
  • Frits Walraven
  • Pete Letkeman

Editable Select Box ?  RSS feed

 
Ranch Hand
Posts: 634
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I've looked through all the HTML documentation I can find, but can't figure this one out. I have form which contaings a select/option list. I want the user to be able to either choose from the list, or input their own text. I don't need the user's new text added to the list, or anything fancy like that - just need to be able to make that select box editable. Am I out of luck?
Thanks in advance for your help!
*Gail
 
Ranch Hand
Posts: 4702
9
Java Scala
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
im not a js expert, but it might be possible. i know you can have a "blank" option. perhaps you can use a variable that is initially "" and if the blank option gets selected you can, using script, check for keyPressed and get the value of it, then concatenate it to the variable. im not sure though.
 
Gail Schlentz
Ranch Hand
Posts: 634
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Ya - I tried that, but even the blank option isn't editable.
Any other advice? I'm beating my head against the wall on this one!
*Gail
 
Randall Twede
Ranch Hand
Posts: 4702
9
Java Scala
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
no you cant make it editable but i think you can make it seem editable the way i described. i would give you some code but im really weak in js.
another possibility is use a text box right below the select maybe. and/or have an <option>other
[ April 02, 2002: Message edited by: Randall Twede ]
 
Ranch Hand
Posts: 65
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Gail,
Thanks to you. I got a chance to do some JS coding myself. Put together a page that works in IE(i do not have Netscape.It sux!) to solve your problem. Remember to select the listbox and then edit it. But my coding is real bad. hope you bear with me
Here it is. Hope it helps.

[ April 02, 2002: Message edited by: swaroop shastri ]
 
Randall Twede
Ranch Hand
Posts: 4702
9
Java Scala
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
thanks for helping out swaroop
two things though. it looks like your function makes all the options editable. im not sure that is what gail wanted. i had the impression she only wanted one option to be editable. the other is that although i dont see anything saying it is forbidden to use a closing tag with option, they dont use one in the examples in the html specification.
again thanks.
 
Gail Schlentz
Ranch Hand
Posts: 634
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks, Swaroop - like Randall said, it's not exactly what I was looking for, but it's definitely a step in the right direction! Gives me something to work with.
Many Thanks!
*Gail
 
swaroop shastri
Ranch Hand
Posts: 65
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks Randall for the HTML stuff! It's been a long time since i coded JS and a real long time using HTML. I just put up the page during lunch(felt like doing something today). Gail's post bought that interest in me to try out a solution for her problem and your post really got me ticking. I used your suggestion of capturing the keypress event to make it look editable! Gail, please do let me know if you have a sleek cross-browser compliant solution to the problem.
I re-read your post and i'm kicking myself for not having given attention to detail
I have an idea for solving your problem. Tweaking the code i've posted might do the trick
All you need is addition of a blank option and just add text to it. This will make it simpler. Instead of

you might want to use

with the first option being "blank" as Randall rightly pointed out.
[ April 02, 2002: Message edited by: swaroop shastri ]
 
Gail Schlentz
Ranch Hand
Posts: 634
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I tweaked the code, and got it working great, except for one thing I can't figure out. When I'm editing my "blank" field, and hit a letter which happens to be the first letter of one of the OTHER options, my focus switches automatically to that other option! I've tried setting the option to .selected=true, but it doesn't catch it at the right time. Here's my version...

Any ideas on how to keep from automatically selecting the "wrong" option??
Many Thanks,
*Gail
 
Randall Twede
Ranch Hand
Posts: 4702
9
Java Scala
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
arg...i didnt know they would do that...arg
im afraid that might spoil everything...
 
swaroop shastri
Ranch Hand
Posts: 65
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I too noticed that behavior. But, that is desired if a lot values are listed in the select box. Also, did you notice that irrespective of whether the caps lock is on/off, the String.fromCharCode() returns uppercase characters! I'm not sure if users want that!
Is the "if" statement necessary. Since the selectedIndex will always be "0" per your HTML.
Suggestion: Implementing the "del"(keycode 46) could be helpful too.
one more word of caution. This might not work with non-english pc's(keyboards)?!
 
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I just programmed this like two weeks ago. The person can entert the values directly into the dropdown.
I need to add a few things to it...Storage and Delteablity, but I will get arpound to it sometime
[edit]ahhhh the url[/edit]
http://www.a1ien51.8k.com/scripts/EditableDD.htm
[ April 03, 2002: Message edited by: Al Ian ]
 
It is sorta covered in the JavaRanch Style Guide.
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!