New on DHTMLGoodies.com:

DHTML Chess Wordpress Plugin (Beta) . Participate in the beta testing of the DHTML Chess for WordPress plugin, and receive a free Commercial License worth USD99.

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 10:25AM, 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 07:51AM, 2011/06/04.
Nils
Many thanks !!!!!!
Nils at 06:13AM, 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 08:09AM, 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 09:03PM, 2011/09/11.
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 details

User 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 UTC


Message: DOM Exception: INVALID_CHARACTER_ERR (5)
Line: 138
Char: 4
Code: 0
URI: http://www.mountainviewmensgolf.org/newsite/jsfiles/EditableSelectBox.js


Message: Unable to get value of the property 'style': object is null or undefined
Line: 67
Char: 46
Code: 0
URI: http://www.mountainviewmensgolf.org/newsite/jsfiles/EditableSelectBox.js

Mike Schroer at 07:08PM, 2011/10/22.
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 05: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 03: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 03:39PM, 2011/11/04.
Larry Martell
<a href="#comment902">Deep wrote:</a>
When I click outside the select options, I want list to disappear as in normal select boxes.
Kindly help.


I have the same issue. I've tried to add an onclick event for the entire document that would hide the select box, but then the select box never displays. I've tried a few different ways to do this, but no joy. Can anyone help with this?
Larry Martell at 02:29PM, 2012/03/18.
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 04: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 04: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 01:14PM, 2012/10/12.
Markus
Where is the script? Does it work in MVC?
Markus at 10:24PM, 2015/04/12.
krishna
<a href="#comment1452">Larry Martell wrote:</a>
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.


<a href="#comment1452">Larry Martell wrote:</a>
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.


krishna at 06:17AM, 2016/10/05.
krishna
can you give your modified code ?
krishna at 06:19AM, 2016/10/05.

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 - 2017 dhtmlgoodies.com