You are here:

DHTML/Dropdown box

Advertisement

Expert: Andrew Hoffman - 4/12/2007


Question
QUESTION: Do you know any way to create on web Dropdown box, to
use it as a select value from predefine list , or
enter you new  value if it not in the list.
This is not standard <select> component. I did not see
it    yet.
May you know third party  component
Thank yoy
ANSWER: Hello-

I started with this example and modified it to accept user input (for custom <option>s): http://www.mredkj.com/tutorials/tutorial005.html

Here is similar code with user input feature added.  Just copy, paste, and run.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript">
<!--
var count1 = 0;
var count2 = 0;

function insertOptionBefore(num)
{
 var elSel = document.getElementById('selectX');
 if (elSel.selectedIndex >= 0) {
   var elOptNew = document.createElement('option');
    elOptNew.text = prompt("Enter option text","");
    elOptNew.value = prompt("Enter option value","");
   var elOptOld = elSel.options[elSel.selectedIndex];  
   try {
     elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE
   }
   catch(ex) {
     elSel.add(elOptNew, elSel.selectedIndex); // IE only
   }
 }
}

function removeOptionSelected()
{
 var elSel = document.getElementById('selectX');
 var i;
 for (i = elSel.length - 1; i>=0; i--) {
   if (elSel.options[i].selected) {
     elSel.remove(i);
   }
 }
}

function appendOptionLast(num)
{
 var elOptNew = document.createElement('option');
 elOptNew.text = prompt("Enter option text","");
 elOptNew.value = prompt("Enter option value","");
 var elSel = document.getElementById('selectX');

 try {
   elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
 }
 catch(ex) {
   elSel.add(elOptNew); // IE only
 }
}

function removeOptionLast()
{
 var elSel = document.getElementById('selectX');
 if (elSel.length > 0)
 {
   elSel.remove(elSel.length - 1);
 }
}
//-->
</script>
</head>

<body>
<form>
<input type="button" value="o" onclick="insertOptionBefore(count1++);" />
Insert Before Selected<br />
<input type="button" value="o" onclick="removeOptionSelected();" />
Remove Selected<br />
<select id="selectX" size="10" multiple="multiple">
<option value="original1" selected="selected">Orig1</option>
<option value="original2">Orig2</option>
</select>
<br />
<input type="button" value="o" onclick="appendOptionLast(count2++);" />
Append Last<br />
<input type="button" value="o" onclick="removeOptionLast();" />
Remove Last
</form>
</body>
</html>



---------- FOLLOW-UP ----------

QUESTION: This is nice , but I ment just a text box above combo, and aafter  submite it goes  with select value or from box.
Yahho mail address box works like i wahted.
I hope someone make it or OpenSource or Comecial product  

Answer
Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Add Select Option</title>
<script language="JavaScript" type="text/javascript">
<!--
function insertOption(item)
{
 var elSel = document.getElementById('selectX');
 elSel.options[elSel.options.length] = new Option(item, item)
}
//-->
</script>
</head>

<body onload="document.forms[0][1].focus()">
<form onsubmit="return false">
<input type="submit" value="Add Item" onclick="insertOption(this.form.txt_option.value);" />
<input type="text" name="txt_option" id="txt_option" /><br />
<select id="selectX" size="10" multiple="multiple">
<option value="original1">Orig1</option>
<option value="original2">Orig2</option>
</select>
</form>
</body>
</html>

DHTML

All Answers

Answers by Expert:

Ask Experts

Volunteer

Andrew Hoffman

Expertise

Ask me about JavaScript, CSS, HTML5/XHTML, or PHP. Chances are I'll be able to help you. I know the economy is in the tank, but if you like my answer, please consider donating a few bucks. It's like tipping your barista, if your barista served fresh code instead of coffee.

Experience

I started doing this when boy bands were still cool.

Education/Credentials
I read a lot of nerdy books to get here.

©2012 About.com, a part of The New York Times Company. All rights reserved.