Add Custom Item To Select List

[Total: 0    Average: 0/5]

This script shows how to have a text box selection added into a select list.

Body Code:

<pre>
I have a text box, a list/menu box and a button.
When I enter something in the text box and hit the
button the value should get added to the list box.
And when I enter a second value in the text box and
hit the add button it should get into the list box
as the second item.
</pre>
<script>
function addIt(_v)
{
 /* uncomment this to see what it is adding as it is adding it */
 /* alert(_v.s1.options.length+"n"+_v.t1.value+"n"+_v.t0.value); */
 var NI = _v.s1.options.length++;
 _v.s1.options[NI].text=_v.t1.value;
 _v.s1.options[NI].value=_v.t0.value;
}
function showIt(_v)
{
  var SI = _v.s1.selectedIndex;
  var ST = _v.s1.options[SI].text;
  var SV = _v.s1.options[SI].value;
  alert("Selected Index="+SI+"nSelected Text="+ST+"nSelected Value="+SV);
}
</script>
<form name=exf1>
<input type=text name=t0 value="val-2" size=5>
<input type=text name=t1 value="Third Selection">
<input type=button name=b1 value="add it now" onclick="addIt(document.exf1)">
<select name=s1 size=4 onchange="showIt(document.exf1)">
    <option value="val-0">First Selection</option>
    <option value="val-1">Second Selection</option>
</select>
</form>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *