New on DHTMLGoodies.com:
DHTML Chess is now available for WordPress at WordPressChess.com.
Download editable select
Put this into your <HEAD> section
Put this into your <BODY> section
Configuration
There are only two things you need to do to make this script work:
- Add an attribute to your <INPUT type="text"> element. Example:
<input type="text" name="myText" value="Norway" selectBoxOptions="Canada;Denmark;Finland;Germany;Mexico; Norway;Sweden;United Kingdom;United States"> - Below your input, you need to call the createEditableSelect() function. Example:
createEditableSelect(document.forms[0].myText);
Javascript variables
Path to arrow images are specified in Javascript variables:
var arrowImage = './images/select_arrow.gif'; // Regular arrow
var arrowImageOver = './images/select_arrow_over.gif'; // Mouse over
var arrowImageDown = './images/select_arrow_down.gif'; // Mouse down
You can change these variables if you use different file path.
Download images
There are three images used in this script:
1.
2.
3.
Right click on each of them and select "Save target As". Put them in a sub folder called "images".
Update log
- November 10th, 2006: Added iframe behind the "select box" in order to cover select boxes below in IE. Ref: problem with windowed vs. window less elements.
Kindly help.
Bob
<input type="text" id="myText2" name="myText2" value="" onclick="clk()" onselect="selfunc()" onchange="chgfunc()" selectBoxOptions="Amy;Andrew;Carol;Jennifer;Jim;Tim;Tommy;Vince">
AND here are my functions:
function clk() {
alert("clk");
//selectBox_showOptions();
};
function selfunc() {
alert("onsel");
};
function chgfunc() {
alert("onchg");
};
function lostfoc) {
alert("onfocusout");
};
I added this line at the end of the 'selectOptionValue' function so that it would fire my onchange event:
textInput.onchange();
Post your comment
Comment preview: