asked on

JavaScript - adding/removing items from a ListBox

Hi,

I have a form, and in this form, there's a drop down menu, two buttons (labelled "add" and "remove") and finally, a listbox.

The question is, when the user clicks on the add button, how do I add the value selected in the drop down menu and put it into the listbox? After adding to the listbox, the selected value needs to stay in the drop down menu and not get removed. When the remove button is pressed, the selected value from the listbox just needs to disappear from the listbox and not the drop down menu.

Thanks in advance

ASKER CERTIFIED SOLUTION

sajuks

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dlzone

ASKER

Not quite what I had in mind.
The user is supposed to choose from a pre-determined drop down list instead of free-typing into a text field.

Sorry, but I'm really new at this.

dlzone

ASKER

My bad, got it working
thanks for the help
greatly appreciated

dlzone

ASKER

Can I ask a follow-up question??
How do I check so that the items won't duplicate in the listbox?

Muthu123

Hi All,
Try this, This may work for you.

<html>
<head>
<title>Add/Delete Options From A Select</title>

<script type="text/javascript">
function addOption(selectObject,optionText,optionValue) {
if ( !recheck (selectObject, optionText, optionValue) ){
var optionObject = new Option(optionText,optionValue)
var optionRank = selectObject.options.length
selectObject.options[optionRank]=optionObject
document.testForm.optionText.value = "";
document.testForm.optionValue.value = "";
}
else{
alert("Option is already present");
}

}

function deleteOption(selectObject,optionRank) {
if (selectObject.options.length!=0) { selectObject.options[optionRank]=null }
}

function testAdd() {
var formObject = document.testForm
if (formObject.optionText.value!="" && formObject.optionValue.value!="") {
addOption(formObject.fruitList,formObject.optionText.value,formObject.optionValue.value)
} else {
alert("Fill form and click Add")
}
}

function testDelete() {
var formObject = document.testForm
if (formObject.fruitList.selectedIndex!=-1) {
deleteOption(formObject.fruitList,formObject.fruitList.selectedIndex)
} else {
alert("Select an option and click Delete")
}
}

function recheck (selectObject, optionText, optionValue){
var sltbool = false;
for (i=0; i<selectObject.options.length; i++){
if (optionText == selectObject.options[i].text || optionValue == selectObject.options[i].text ){
sltbool = true;
break
}
}
return sltbool;
}

</script>

</head>

<body>
<form name="testForm">
<select name="fruitList" size="10">
<option>Apple</option>
<option>Kiwi</option>
<option>Banana</option>
<option>Peach</option>
<option>Orange</option>
</select>
<br/>
Fill form and click Add :<br/>
Option Text : <input type="text" name="optionText"/>
Option Value : <input type="text" name="optionValue"/>
<input type="button" value="Add" onclick="testAdd()"/><br/>
Select an option and click Delete : <input type="button" value="Delete" onclick="testDelete()"/>
</form>

</body>
</html>

Thanks
Muthu.

Muthu123

Hi Change this line to
if (optionText == selectObject.options[i].text || optionValue == selectObject.options[i].text ){

if (optionText == selectObject.options[i].text || optionValue == selectObject.options[i].value ){

saadshakil

May I ask, how are you creating this code? Using a tool?