PDA

View Full Version : How to make drop down editable?

buckbeak
08-01-2002, 09:28 AM
is it possible for a drop down menu to be function as input box and drop down.

the drop down i meant is the <select> tag.

Is it possible?
x_goose_x
08-01-2002, 01:32 PM
no, you can however have a textbox that inputs data into the dropdown.
snakedevil1
08-01-2002, 01:38 PM
u could create like a custom box, with the selected layer on top showing and the other layer with a bunch of text inputs in it hidden until the user hits the down arrow button. I'd create it for u, but right now im running out of time.
x_goose_x
08-01-2002, 02:41 PM
<html>

<head>
<script>
function sh(what) {
d = "document.getElementById('"+what+"').style.display";
dsp = eval(d);
if (dsp=="none") {
eval(d+" = ''");
}else{
eval(d+" = 'none'");
}
}
</script>
</head>

<body>

<form>

<table border="1" style="border: 1 solid #000000;" cellspacing="0" cellpadding="0" width="143px">
<tr>
<td width="100%"><input type="text" name="bx0" size="18" style="border: 0 solid #000000;"><font SIZE="1" face="Webdings"><a href="javascript: sh('drp');">6</a></font></td>
</tr>
</table>
<table border="1" style="border: 1 solid #000000; display: ;" cellspacing="0" cellpadding="0" width="143px" id="drp">
<tr>
<td width="100%"><input type="text" name="bx1" size="20" style="border: 0 solid #000000;"></td>
</tr>
<tr>
<td width="100%"><input type="text" name="bx2" size="20" style="border: 0 solid #000000;"></td>
</tr>
<tr>
<td width="100%"><input type="text" name="bx3" size="20" style="border: 0 solid #000000;"></td>
</tr>
</table>

</form>

</body>

</html>
jkd
08-01-2002, 06:19 PM
XUL provides a widget for accomplishing this:

<menulist editable="true" label="default value" id="color">
<menupopup>
<!-- many <menuitem/>'s -->
</menupopup>
</menulist>

Though I somehow don't think you are writing a XUL document. :D
ConfusedOfLife
08-01-2002, 09:36 PM
Well, acutually I don't know the answer! I just wanted to know what this XUL is! Where can I find some info about this thing & it's widgets?!
buckbeak
08-02-2002, 02:28 AM
Thanks for the script x_goose_x but how do i select the option?
x_goose_x
08-02-2002, 02:57 AM
That's what I don't get about the whole thing. How do you want it?

I thought maybe radio buttons beside it?


+------------+
| Start |
+------------+
| one o |
| two o |
| three o |
+------------+


or make them by default non-editable but with an edit button beside it:


+------------+
| Start |
+------------+
| one E |
| two E |
| three E |
+------------+


E being the edit button.

Tell me what you want and I'll write the script.
buckbeak
08-02-2002, 10:35 AM
Actually what i wanted is a drop down menu where user will be able to select the options like the <select> tag. But the options are fixed. I want the drop down to function like an input textbox so that if the options are not available user can key in an option.

This is the normal drop down.
<select name="something">
<option value="1">one</option>
:
</select>

Is it possible?

the script that u give me is something like what i wanted but i cannot select the option?
x_goose_x
08-02-2002, 06:29 PM
<html>

<head>
<script>
function sh(what) {
d = "document.getElementById('"+what+"').style.display";
dsp = eval(d);
if (dsp=="none") {
eval(d+" = ''");
}else{
eval(d+" = 'none'");
}
document.dropform.bx0.value = eval("document.dropform."+obj+".value");
}
function clk(n) {
y = document.dropform.length-1;
for (x=0;x<y;x++) {
eval("document.dropform.bx"+(x+1)+".style.backgroundColor = ''");
eval("document.dropform.bx"+(x+1)+".style.color = ''");
}
eval("document.dropform."+n+".style.backgroundColor = 'highlight'");
eval("document.dropform."+n+".style.color = 'white'");
document.dropform.bx0.value = eval("document.dropform."+n+".value");
obj = n;
}
</script>
</head>

<body>

<form name="dropform">

<table border="1" style="border: 1 solid #000000;" cellspacing="0" cellpadding="0" width="143px">
<tr>
<td width="100%"><input type="text" name="bx0" size="18" style="border: 0 solid #000000;"><font SIZE="1" face="Webdings"><a href="javascript: sh('drp');">6</a></font></td>
</tr>
</table>
<table border="1" style="border: 1 solid #000000; display: none;" cellspacing="0" cellpadding="0" width="143px" id="drp">
<tr>
<td width="100%"><input type="text" name="bx1" size="20" style="border: 0 solid #000000;" onclick="clk(this.name)"></td>
</tr>
<tr>
<td width="100%"><input type="text" name="bx2" size="20" style="border: 0 solid #000000;" onclick="clk(this.name)"></td>
</tr>
<tr>
<td width="100%"><input type="text" name="bx3" size="20" style="border: 0 solid #000000;" onclick="clk(this.name)"></td>
</tr>
</table>

</form>

</body>

</html>


variable obj is the name of the element that is selected.

Therefore:

p = eval("document.dropform."+obj+".value")

p is the value of the element.

What is the purpose of all this? How is the informatrion going to be used?
jkd
08-02-2002, 07:33 PM
Originally posted by ConfusedOfLife
Well, acutually I don't know the answer! I just wanted to know what this XUL is! Where can I find some info about this thing & it's widgets?!

XUL is Gecko-only, and the Netscape 6/7, and Mozilla UI's are written in it. (Not sure if Beonex, K-meleon, or Galeon uses XUL or embeds Gecko in a native window...)
Algorithm
08-03-2002, 12:12 AM
Here's an example of a javascript combo box I whipped up about a year ago:

http://www.undefined.net/null/combo.html

It's incomplete, but should provide you with a good base to start from.
buckbeak
08-03-2002, 06:16 AM
Thanks alot guys...

actually i'm integrating this script with cold fusion script i need to get the value of the selected option.