TheConeHead
Programmer
I know in Flash I can have a select that I can also enter a new entry in? Is that in HTML?
![[conehead]](/data/assets/smilies/conehead.gif "[conehead] [conehead]")
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
editable select
- Thread starter TheConeHead
- Start date
- Status
No and yes.
There isn't such a form widget in HTML. You would have to code something using JavaScript. For example, an "Other" selection in your dropdownlist that, when selected, made a previously hidden textbox visible.
Thomas D. Greer
Providing PostScript & PDF
Training, Development & Consulting
There isn't such a form widget in HTML. You would have to code something using JavaScript. For example, an "Other" selection in your dropdownlist that, when selected, made a previously hidden textbox visible.
Thomas D. Greer
Providing PostScript & PDF
Training, Development & Consulting
- Thread starter
- #3
Here is a start. I haven't tested it cross-browser.
Plus, I've only coded "do this to the select if the user does this with the textbox". I haven't coded "do this to the textbox if the user does this to the select".
Even better would be to do something with CSS to make these look like a single control.
But, it should get you going:
Thomas D. Greer
Providing PostScript & PDF
Training, Development & Consulting
Plus, I've only coded "do this to the select if the user does this with the textbox". I haven't coded "do this to the textbox if the user does this to the select".
Even better would be to do something with CSS to make these look like a single control.
But, it should get you going:
Code:
<html>
<head>
<script type="text/javascript">
function fakeCombo(x,e)
{
var S = document.getElementById("selCombo");
var L = S.options.length;
var found = false;
var myIndex = 0;
if (e.which == 13)
{
for (var i=0; i <= L-1; i++)
{
if (x.value == S.options[i].value) {found = true; myIndex = i};
}
if (found)
{
S.options.selectedIndex = myIndex;
}
else
{
S.options[S.options.length] = new Option(x.value,x.value);
S.options.selectedIndex = (S.options.length - 1);
}
return false;
}
}
</script>
</head>
<body>
<form>
<input onkeypress="JavaScript:return fakeCombo(this,event);" id="txtCombo"/><br/>
<select id="selCombo"/>
<option value="Volvo"/>Volvo
<option value="Saab"/>Saab
<option value="Fiat"/>Fiat
<option value="Audi"/>Audi
</select>
</form>
</body>
</html>Thomas D. Greer
Providing PostScript & PDF
Training, Development & Consulting
What about this? (Functional in FF 1.0 PR):
*cLFlaVA
----------------------------
"Holy crip he's a crapple!
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<title>new document</title>
<style type="text/css">
#main {
position: relative;
}
#main input, #main select {
position: absolute;
}
#main select {
width: 200px;
z-index: 1;
}
#main input {
width: 175px;
z-index: 2;
}
</style>
</head>
<body>
<div id="main">
<form name="f">
<input type="text" name="parts" />
<select name="sel" onchange="this.form.parts.value = this.options[this.selectedIndex].value;">
<option>Steering Wheel</option>
<option>Headlight</option>
<option>Intake Valve</option>
<option>Cam Shaft</option>
</select>
</form>
</div>
</body>
</html>*cLFlaVA
----------------------------
"Holy crip he's a crapple!
This works in Mozilla:
Thomas D. Greer
Providing PostScript & PDF
Training, Development & Consulting
Code:
<html>
<head>
<style type="text/css">
.txtBox
{
position: absolute;
top: 20px;
left: 20px;
width: 100px;
z-index: 5;
}
.dropDown
{
position: absolute;
top: 20px;
left: 20px;
width: 120px;
z-index: 4;
}
</style>
<script type="text/javascript">
function fakeCombo(x,e)
{
var S = document.getElementById("selCombo");
var L = S.options.length;
var found = false;
var myIndex = 0;
if (e.which == 13)
{
for (var i=0; i <= L-1; i++)
{
if (x.value == S.options[i].value) {found = true; myIndex = i};
}
if (found)
{
S.options.selectedIndex = myIndex;
}
else
{
S.options[S.options.length] = new Option(x.value,x.value);
S.options.selectedIndex = (S.options.length - 1);
}
return false;
}
}
function mySelect(x)
{
document.getElementById("txtCombo").value = x.options[x.selectedIndex].value;
}
</script>
</head>
<body>
<form>
<input onkeypress="JavaScript:return fakeCombo(this,event);" id="txtCombo" class="txtBox" /><br/>
<select id="selCombo" class="dropDown" onChange="JavaScript:mySelect(this);" />
<option value="Volvo"/>Volvo
<option value="Saab"/>Saab
<option value="Fiat"/>Fiat
<option value="Audi"/>Audi
</select>
</form>
</body>
</html>Thomas D. Greer
Providing PostScript & PDF
Training, Development & Consulting
Problem is that IE ignores z-index for select lists. So for IE, you have to scoot the textbox up a bit to make it visible.
There are work-arounds for that, too, such as putting the SELECT inside of an IFRAME.
Thomas D. Greer
Providing PostScript & PDF
Training, Development & Consulting
There are work-arounds for that, too, such as putting the SELECT inside of an IFRAME.
Thomas D. Greer
Providing PostScript & PDF
Training, Development & Consulting
- Status
Similar threads
- Locked
- Question
- Locked
- Question