Adding Items To A Combo Box

arpan · Apr 23, 2003

An HTML Form has a textbox & a combo box along with 2 buttons - ADD & REMOVE. When the Form is loaded, the combo box is empty. Now what I want is when a user enters some text in the textbox & clicks the ADD button, that text should get added to the combo box. Users should be allowed to enter as many no. of items as they like.Alternately when a user selects one item in the combo box & clicks the REMOVE button, that item should get deleted from the combo box. Again users should be allowed to delete as many no. of items as they like. How do I do this using JavaScript?

Thanks,

Arpan

mwolf00 · Apr 23, 2003

Here's a script I wrote to manipulate combo boxes, you might find it useful in helping you do what you want.

<script>
option0 = new Option("Choice 0 Text","Choice0val&quot

option1 = new Option("Choice 1 Text","Choice1val&quot

option2 = new Option("Choice 2 Text","Choice2val&quot

option3 = new Option("Choice 3 Text","Choice3val&quot

option4 = new Option("Choice 4 Text","Choice4val&quot

option5 = new Option("Choice 5 Text","Choice5val&quot

optionArr = new Array(option0,option1,option2,option3,option4,option5)
//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
//this function loads the first select
function loadSelect(){
thisField = document.myForm.select1
for (x=1; x < optionArr.length; x++){ //Note "x=1" since you do not want to remove the first <option>
thisField.options[x] = null
}
for (x=0; x < optionArr.length; x++){
thisField.options[x] = optionArr[x];
//thisField.options[x].selected = true
}
}
//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
function moveVal(inBool){
theIndex = document.myForm.select1.selectedIndex
if (inBool){
if (theIndex > 0){
oldOptionVal = optionArr[theIndex].value
oldOptionTxt = optionArr[theIndex].text
oldOption = new Option(oldOptionTxt, oldOptionVal)
optionArr[theIndex] = optionArr[theIndex-1]
optionArr[theIndex-1] = oldOption
loadSelect()
document.myForm.select1.selectedIndex = theIndex - 1
}
}
else if (theIndex != -1){
if (theIndex < optionArr.length-1){
oldOptionVal = optionArr[theIndex+1].value
oldOptionTxt = optionArr[theIndex+1].text
oldOption = new Option(oldOptionTxt, oldOptionVal)
optionArr[theIndex+1] = optionArr[theIndex]
optionArr[theIndex] = oldOption
loadSelect()
document.myForm.select1.selectedIndex = theIndex + 1
}
}
}
//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
function resetVal(){
for (x=0; x < optionArr.length; x++){
optionArr[x] = eval("option" + x)
}
loadSelect()
}

//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
function popSecond(){
//this function loads the second select using the primary select (select1)
if (document.myForm.second.value=="Populate 2nd Select&quot

{
for (x=0; x<document.myForm.select1.length; x++){
newText = document.myForm.select1.options[x].text
newVal = document.myForm.select1.options[x].value
document.myForm.select2.options[x] = new Option(newText,newVal)
}
document.myForm.second.value = "Erase 2nd Select"
}
else{
for (x=document.myForm.select2.length-1; x>=0 ; x--){
document.myForm.select2.options[x] = null
}
document.myForm.second.value = "Populate 2nd Select"
}
}
//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
function popThird(){
//this function loads the third select using the option Array
if (document.myForm.third.value=="Populate 3rd Select&quot

{
for (x=0; x<optionArr.length; x++){
newText = optionArr[x].text
newVal = optionArr[x].value
document.myForm.select3.options[x] = new Option(newText,newVal)
}
document.myForm.third.value = "Erase 3rd Select"
}
else{
for (x=document.myForm.select3.length-1; x>=0 ; x--){
document.myForm.select3.options[x] = null
}
document.myForm.third.value = "Populate 3rd Select"
}
}

</script>

<body onLoad="loadSelect()">

<form name="myForm">
<select name="select1" multiple size=6><option></select>
<input type=button name=b1 value="Move Up" onClick="moveVal(true)">
<input type=button name=b2 value="Move Down" onClick="moveVal(false)">
<input type=button name=b3 value="Reset" onClick="resetVal()">
<input type=button name=b3 value="Show" onClick="viewArr()">
<br>
<select name="select2" multiple size=6><option></select>
<input type=button onClick="popSecond()" name="second" value="Populate 2nd Select">
<br>
<select name="select3" multiple size=6><option></select>
<input type=button onClick="popThird()" name="third" value="Populate 3rd Select">

Get the Best Answers! faq333-2924
Is this an asp FAQ? faq333-3048
Tek-Tips Best Practices: FAQ183-3179

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Adding Items To A Combo Box

arpan

Programmer

mwolf00

Programmer

Similar threads

Part and Inventory Search

Sponsor