Download editable select

Demo

Bookmark and Share

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:

  1. 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">
  2. 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.

Comments

Ankur
Hi,I am facing problem using this script with IE6. When I click the down arrow for opening the select(div). The background behind the select(div) also slides down. This doesn't look good in IE6. Can you please help me.
Ankur at 04:25PM, 2011/04/18.
thuchv
Hi ankur,I've faced your problem and I fixed it by adding the attribute "float:left;" in the css class: selectBoxOptionContainer. That's OK!
thuchv at 01:51PM, 2011/06/04.
Nils
Many thanks !!!!!!
Nils at 12:13PM, 2011/08/13.
bob vu
I have a java script to check for input - onChange in this button dropdown - but if I select the item and move to next inbput box, nothing happen. I have to enter the value in the drop down and onChange can happen. I think either enter new value or select drop down should make onChange occur. Thanks
bob vu at 02:09PM, 2011/08/17.
Deep
When I click outside the select options, I want list to disappear as in normal select boxes.
Kindly help.
Deep at 03:03AM, 2011/09/12.
Mike Schroer
I am getting this error on a page that I published to NetSolutions (Our Site host) I have an apache server on my local macine). Really Like your produce (and really NEED IT). Am getting the following error details when I load the page from the remote site, I do not get it when I load the page from my site. Am using IE 9. I don't get the error from the remote site with Mozilla Firefox or Safari. Thanx for any help you can provide--------------------------------------------------------Webpage error detailsUser Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; HPDTDF; .NET4.0C; .NET4.0E)Timestamp: Sun, 23 Oct 2011 01:06:14 UTCMessage: DOM Exception: INVALID_CHARACTER_ERR (5)Line: 138Char: 4Code: 0URI: http://www.mountainviewmensgolf.org/newsite/jsfiles/EditableSelectBox.jsMessage: Unable to get value of the property 'style': object is null or undefinedLine: 67Char: 46Code: 0URI: http://www.mountainviewmensgolf.org/newsite/jsfiles/EditableSelectBox.js
Mike Schroer at 01:08AM, 2011/10/23.
xentia
Very useful component. It will be nice if there a capability to hide drow-down div when focus is move to another element of page - like DEEP say.
xentia at 11:15AM, 2011/11/04.
David Fackler
Fix for IE5-9.* Addresses SCRIPT5022 dom exception invalid_character_err 5* Specification for document.createElement() expects an identifying name rather than an HTML snippet.Replace:var iframe = document.createElement('<IFRAME src="about:blank" frameborder=0>');With:var iframe = document.createElement('IFRAME');iframe.setAttribute("src", "about:blank");iframe.setAttribute("frameborder", "0");
David Fackler at 09:18PM, 2011/11/04.
David Fackler
Fix for IE9:* Addresses error SCRIPT5007: Unable to get value of the property 'style': object is null or undefined* IE9 is more spec compliant and doesn't need the special handling Replace lines like:if(navigator.userAgent.indexOf('MSIE')>=0)document.getElementById(...).style.display=...;With:if(navigator.userAgent.indexOf('MSIE')>=0 && navigator.userAgent.indexOf('MSIE')<9)document.getElementById(...).style.display=...;
David Fackler at 09:39PM, 2011/11/04.
Larry Martell
I solved this by added the event as an argument to selectBox_showOptions, then at then end of the function adding:e.stopPropagation();And then I added this function:document.onclick=function() { if (currentlyOpenedOptionBox.style.display == 'block') currentlyOpenedOptionBox.style.display = 'none';}That seems to do the trick.
Larry Martell at 10:27PM, 2012/03/18.
DjCzermino
I created function "removeEditableSelect", if someone needs it put this row:prevClassNames[selectBoxIds] = dest.className;as the first row in function "createEditableSelect", like this:function createEditableSelect(dest){ prevClassNames[selectBoxIds] = dest.className; ... and here is the code for remove editable select: var prevClassNames = [];function removeEditableSelect(targetInput){ targetInput.className = prevClassNames[selectBoxIds-1]; var nodeToBeRemoved = targetInput.parentNode; nodeToBeRemoved.parentNode.insertBefore(nodeToBeRemoved.firstChild,nodeToBeRemoved); nodeToBeRemoved.parentNode.removeChild(nodeToBeRemoved);}
DjCzermino at 10:17PM, 2012/06/27.
Nancy
Hi, I have a customized pulldown menu (selection box), not sure what the technical term is, a lot of this is over my head. Anyway, I want to keep the look that I have but want it to go to a url once an item in the pulldown is selected and I want it to be a scroll menu. Can anyone help a not-so-techi designer accomplish this? Here's the code I have<style type='text/css'> div.selectBox { position:relative; display:inline-block; cursor:default; text-align:left; line-height:30px; clear:both; color:#FFF; } span.selected { width:148px; text-indent:5px; border:1px solid #999999; border-right:none; border-top-left-radius:-5px; border-bottom-left-radius:5px; background:#FFFFFF; font-family: Arial,Helvetica,sans-serif,Verdana; font-size:13px; color: #000; overflow:hidden; } span.selectArrow { width:30px; border:1px solid #0053a0; border-top-right-radius:5px; border-bottom-right-radius:5px; text-align:center; font-size:13px; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; background:#0053a0; } span.selectArrow,span.selected { position:relative; float:left; height:27px; z-index:1; } div.selectOptions { position:absolute; top:28px; left:0; width:179px; border:1px solid #ccc; border-bottom-right-radius:5px; border-bottom-left-radius:5px; overflow:hidden; font-family: Arial,Helvetica,sans-serif,Verdana; font-size:14px; background:#54a1ef; padding-top:2px; display:none; } span.selectOption { display:block; width:100%; line-height:20px; color: #FFFFFF; padding:2px 3%; } span.selectOption:hover { color:#FFFFFF; background:#0053a0; } a:link { color: #ffffff; text-decoration: none;}a:visited { text-decoration: none;}a:hover { text-decoration: none;}a:active { text-decoration: none;}</style> <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> </head> <body><script type='text/javascript'><!-- $(document).ready(function() { enableSelectBoxes(); }); function enableSelectBoxes(){ $('div.selectBox').each(function(){ $(this).children('span.selected').html($(this).children('div.selectOptions').children('span.selectOption:first').html()); $(this).attr('value',$(this).children('div.selectOptions').children('span.selectOption:first').attr('value')); $(this).children('span.selected,span.selectArrow').click(function(){ if($(this).parent().children('div.selectOptions').css('display') == 'none'){ $(this).parent().children('div.selectOptions').css('display','block'); } else { $(this).parent().children('div.selectOptions').css('display','none'); } }); $(this).find('span.selectOption').click(function(){ $(this).parent().css('display','none'); $(this).closest('div.selectBox').attr('value',$(this).attr('value')); $(this).parent().siblings('span.selected').html($(this).html()); }); }); }//--> </script> <div class='selectBox'> <span class='selected'></span> <span class='selectArrow'>▼</span> <div class="selectOptions" > <span class="selectOption" value="Option 1">Option1</span> <span class="selectOption" value="Option 2">Option 2</span> <span class="selectOption" value="Option 3">Option 3</span> <span class="selectOption" value="Option 4">Option 4</span> </div> </div> </body></html>
Nancy at 07:14PM, 2012/10/12.
Markus
Where is the script? Does it work in MVC?
Markus at 04:24AM, 2015/04/13.
krishna
can you give your modified code ?
krishna at 12:19PM, 2016/10/05.
Bob
I can't seem to get any events to work using this code (ie "onselect", "onclick", or "onchange". Suggestions? Thanks,
Bob
Bob at 02:50PM, 2019/05/06.
Bob
Here's my code:
<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");
};
Bob at 02:51PM, 2019/05/06.
Bob
UPDATE: SOLVED
I added this line at the end of the 'selectOptionValue' function so that it would fire my onchange event:

textInput.onchange();
Bob at 03:59PM, 2019/05/06.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2024 dhtmlgoodies.com