Entry
JavaScript: How do I emulate a combobox?
May 7th, 2005 23:49
Knud van Eeden, Mat H,
----------------------------------------------------------------------
--- Knud van Eeden - 25 September 2001 - 09:22 pm --------------------
JavaScript: How do I emulate a combobox?
---
Possible workaround:
input field + listbox.
After pressing the button:
If user has filled in the input field, take that value,
else take the value of the listbox.
This is what you see:
+-----------------------------------------------------------+
| Input your value |
| +-----------------+ +-----------+--+ |
| |Option5 | |Option3 |V | |
| +-----------------+ +-----------+--+ |
| +-----------------------------------+ |
| |Input: editable or listbox | |
| +-----------------------------------+ |
+-----------------------------------------------------------+
In this example, if press the button (or put the focus on the text
field, and then press the <ENTER> key), you will see an alert
box with the current content of the text input field, or thus
'option 5'
---
You can edit the content of the text input field.
-If you select a new option from the list box, this option is filled in
automatically in the text input field
-If you change the text field input, this text is chosen.
---
This is the program (copy this text, and save it as combobox.htm,
then load this file combobox.htm in your browser, by typing
c:\temp\combobox.htm
in the URL field of your browser (given that you stored this file
in the directory c:\temp).
--- cut here: begin --------------------------------------------------
<HTML>
<!-- (filenamemacro=combobox.htm) -->
<HEAD>
<TITLE>
My title
</TITLE>
</HEAD>
<BODY
BGCOLOR="white"
onLoad=' document.form1.text1.value=document.form1.listbox1.value;'
>
<!------------------------------------------------------------------->
<BR/>
<BR/>
<FORM
NAME="form1"
>
<!----------------------------------------------------------------->
<HR>
<!----------------------------------------------------------------->
Input your value
<BR/>
<!----------------------------------------------------------------->
<INPUT
TYPE="text"
NAME="text1"
VALUE=""
SIZE="30"
onKeyDown='
if (
( event.which && event.which == 13 )
||
( event.keyCode && event.keyCode == 13 )
) {
this.form.button1.click();
return( false );
}
else {
return( true );
};'
>
</INPUT>
<!----------------------------------------------------------------->
<SELECT
NAME="listbox1"
onChange='
document.form1.text1.value=document.form1.listbox1.value;'
>
<OPTION
VALUE="Option1"
>
Option1
<OPTION SELECTED
VALUE="Option2"
>
Option2
<OPTION
VALUE="Option3"
>
Option3
</SELECT>
<!----------------------------------------------------------------->
<BR/>
<INPUT
TYPE="button"
NAME="button1"
VALUE="Input: editable or listbox "
onClick=' alert( FNComboboxS( document.form1.text1.value,
document.form1.listbox1.value ) );'
>
</INPUT>
<!----------------------------------------------------------------->
<HR>
<!----------------------------------------------------------------->
</FORM>
</BODY>
</HTML>
<SCRIPT LANGUAGE = "JavaScript">
<!--
<!-- library: combobox: input: if user filled in something in text
box, return the textbox input, else the listbox input [kn, ri, tu, 25-
09-2001 20:44:14] -->
function FNComboboxS( inputtextS, inputlistboxS ) {
var s = "";
if ( inputtextS != inputlistboxS ) {
s = inputtextS;
}
else {
s = inputlistboxS;
}
return( s );
}
// -->
</SCRIPT>
--- cut here: end ----------------------------------------------------
---
---
Here is another example:
---
[Internet: source: http://www1.askme.com/SearchResults.asp?
pm=va&xp=on&cid=1048&qa=top&cn=on&query=combobox&prev=CN%2520QA%2520XP%
2520&vid=4560825]
--- cut here: begin --------------------------------------------------
<HTML>
<HEAD>
<TITLE>
Combobox
</TITLE>
<SCRIPT
LANGUAGE = "JavaScript"
>
<!--
<!-- library: input: listbox: select: e-mail list [kn, ri, th, 27-09-
2001 00:45:35] -->
function PROCListBoxSelectEMail() {
var emailIDs = new Array(
"test1@askme.com",
"test2@askme.com",
"test3@askme.com",
"test4@askme.com",
"test5@askme.com"
);
document.write( '<option value="notselected" selected>select email
address</option>' );
for ( var i = 0; i < emailIDs.length; i++ ) {
document.write( '<option value="' + emailIDs[i] + '">' + emailIDs
[i] + '</option>' );
}
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM
NAME="form1"
>
<SELECT
NAME="mySelect"
onChange='
document.form1.myText.value=document.form1.mySelect.value;'
>
<SCRIPT>
PROCListBoxSelectEMail();
</SCRIPT>
</SELECT>
<BR/>
<INPUT
TYPE="text"
NAME="myText"
VALUE="my text"
>
</FORM>
</BODY>
</HTML>
--- cut here: end ----------------------------------------------------
---
---
Internet: see also:
---
JavaScript: Is it possible create an editable option in a select
object?
http://www.faqts.com/knowledge_base/view.phtml/aid/8220
---
EDITABLE Dropdown (ListBox/ComboBox)
http://webdeveloper.earthweb.com/repository/javascripts/2003/07/227971/
pp_editable_dropdown.html
---
Searching at e.g. http://www.google.com, for the words
'combobox JavaScript'
shows:
that a commercial solution is available at:
http://www.ycode.com/ComboBox/Latest/combo_box_simple.htm
---
another solution, using .htc is shown at:
http://www.bettises.com/dhtml/combobox.htm
but this does not supply the corresponding .htc file, which
you also need (and you will have to use Internet Explorer
to see the combobox correctly)
---
How can I combine a SELECT element and an INPUT TYPE="text" field so
that the user can input new OPTIONs for the SELECT?
http://www.faqts.com/knowledge_base/view.phtml/aid/8561]
---
JavaScript: How to autocomplete a text field?
http://www.faqts.com/knowledge_base/view.phtml/aid/1174/fid/178]
---
JavaScript: Is it possible create an editable option in a select
object?
http://www.faqts.com/knowledge_base/view.phtml/aid/8220/fid/178]
---
This is an example of how to have a popup contain choices for the user
to pick from, to populate a form field.
http://www.mattkruse.com/javascript/popupwindow/
---
Database: MySql: PHPRunner: Combobox: Create: How to create a combobox
in PHPRunner?
http://www.faqts.com/knowledge_base/view.phtml/aid/35985/fid/1805
----------------------------------------------------------------------
