?
Solved

Editable dropdown box to be used in coldfusion application

Posted on 2007-10-12
6
Medium Priority
?
692 Views
Last Modified: 2013-11-19
I need to make an editable dropdown box in my coldfusion application. It's like you can either choose from the list below or type in your own text. I dont know if ther is one out of the box like list box and combo box.. or is there one?

If not then what is the simple and best way to make one? I'm sure coldfusion may not have anything to do with it and it will be HTML and JavaScript. That's OK too.

I thought I'd just ask before I break my head with something like this
http://webdeveloper.earthweb.com/repository/javascripts/2004/10/609371/pp_editable_dropdown.html

If coldfusion can help.. that would be excellent. I think ASP.NET already has something like this. Your help would be appreciated.
0
Comment
Question by:aliasim99
  • 2
  • 2
  • 2
6 Comments
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 1000 total points
ID: 20067854
aliasim99,

Do you have to have the new item in the dropdown list?  This would usually be done by having an "Other" option as the last in the list.  If that is selected then you have a input box for the item to be input.  This could even be hidden until Other is selected.  Let me know if you need help doing this on your page and provide the html for that part of the page.

Let me know if you have any questions or need more information.

b0lsc0tt
0
 
LVL 18

Expert Comment

by:Morcalavin
ID: 20068029
I created something like this a while ago for work.  It isn't super duper fancy, but it gets the job done.

http://www.irlazy.com/programs/Combo_Box/comboBox.js

It breaks when you resize the page(never got around to fixing that.  I suppose a window.onresize call could do it) and the button is pretty crappy(in my version for work, I replaced it with a graphic button).

Here is a basic example of it's usage:
<html>
<head>
<script src="comboBox.js"></script>
<script>
window.onload = function() {
var myComboBox = new comboBox(100, document.getElementById('textbox'));
myComboBox.addOption('Item 1');
myComboBox.addOption('Item 2');
myComboBox.addOption('Item 3');
myComboBox.addOption('Item 4');
}
</script>
</head>
<body>
<input type="text" id="textbox"/>
</body>
</html>
</script>
0
 

Author Comment

by:aliasim99
ID: 20068407
Morcalavin:You got the right Idea. That is what I need but I cant use this. I could if it was my own app. But on the same page I have other dropdowns and that button looks no where close to it. My app will be used internally by fortune 500  companies. I like the idea of using text box and connecting a combo box to it. But I need something similar to the link I provide. Something that does not take the look and feel away.

b0lsc0tt:I see what you mean but the requirement is editable dropdown. Another field will not make my boss happy :)
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 18

Assisted Solution

by:Morcalavin
Morcalavin earned 1000 total points
ID: 20068910
You can always style it to look like the rest of the page.  In my app, I changed the button to an image, and it worked perfectly.  You'd just have to tweak the code a bit.
0
 

Author Comment

by:aliasim99
ID: 20143430
I used the code from the site I listed. Thanks for your help.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 20143499
Your welcome!  I'm glad I could help.  Thanks for the fun question, the grade, and the points.

bol
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

750 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question