help with adding/removing item from list

liftthis · 12-16-2008, 03:58 PM

Need some help with getting the remove selected item code to work:

<html>
<head>
<title>(Type a title for your page here)</title>
<script language="javascript" >

function addNewItem()
{
// Retrieve the elements from the document body
var textbox = document.getElementById('MyTextbox');
var listbox = document.getElementById('MyListbox');

// Now we need to create a new 'option' tag to add to MyListbox
var newOption = document.createElement('option');
newOption.value = textbox.value; // The value that this option will have
newOption.innerHTML = textbox.value; // The displayed text inside of the <option> tags

// Finally, add the new option to the listbox
listbox.appendChild(newOption);
}

function removeItem(listbox)
{
var i;
for(i=listbox.options.length-1;i>=0;i--)
{
if(listbox.options[i].selected)
listbox.removeChild(i);
}
}

</script>
</head>

<input id="MyTextbox" type="textbox" />
<input type="button" value="Add Item" onclick="java script:addNewItem()" />
<input type="button" value="Remove Item" onclick="java script:removeItem()" />

<br /><br />

<select id="MyListbox" size="10">
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
<option value="bananas">Bananas</option>
</select>

</form>
</body>

</html>

itsallkizza · 12-16-2008, 04:23 PM

Well for starters, listbox isn't defined anywhere.

Add this to your remove function (like you did in your add function): var listbox = document.getElementById('MyListbox');

liftthis · 12-16-2008, 04:46 PM

I updated the remove function, but how do you remove the selected value? I don't think the removeChild would be correct for this.

function removeItem(listbox)
{
var listbox = document.getElementById('MyListbox');
var i;
for(i=listbox.options.length-1;i>=0;i--)
{
if(listbox.options[i].selected)
listbox.removeChild(i);
}
}

itsallkizza · 12-16-2008, 05:56 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example</title>
<style type="text/css">
body
{
font-family: verdana,arial,sans-serif;
font-size: 12px;
}

form span.title
{
font-weight: bold;
margin: 0 4px 0 0;
}
</style>
<script type="text/javascript">
// <![CDATA[

/*Author: itsallkizza*/

function add_option_to(select,option_name,option_value)
	{
	if (document.createElement)
		{
		var new_option = document.createElement("option");
		new_option.value = option_value;
		new_option.innerHTML = option_name;
		if (select.appendChild)
			{
			select.appendChild(new_option);
			return new_option;
			}
		}
	return null;
	}

function remove_option_by_index(select,index)
	{
	if (select.removeChild && select.options && select.options.length > index)
		{
		select.removeChild(select.options[index]);
		return true;
		}
	return false;
	}

function addNewOption(form_element)
	{
	var new_name = form_element.new_option_name.value || false;
	var new_value = form_element.new_option_value.value || "";
	if (!new_name) return false;
	add_option_to(document.getElementById(form_element.select_id.value),new_name,new_value);
	return false;
	}

function removeOption(form_element)
	{
	var index = form_element.option_index.value || false;
	if (!index || isNaN(index)) return false;
	remove_option_by_index(document.getElementById(form_element.select_id.value),index);
	return false;
	}
// ]]>
</script>
</head>
<body>

<form onsubmit="return addNewOption(this)">
	<input type="hidden" name="select_id" value="my_select" />
	<span class="title">New Option Name:</span><input type="text" name="new_option_name" />
	<span class="title">New Option Value:</span><input type="text" name="new_option_value" />
	<input type="submit" value="Add New Option" />
</form>
<form onsubmit="return removeOption(this)">
	<input type="hidden" name="select_id" value="my_select" />
	<span class="title">Remove Option Index:</span><input type="text" name="option_index" />
	<input type="submit" value="Remove Option" />
</form>

<select id="my_select">
	<option value="apples">Apples</option>
	<option value="bananas">Bananas</option>
	<option value="oranges">Oranges</option>
</select>

</body>
</html>

liftthis · 12-16-2008, 06:10 PM

Is there a way to add just the text without the option value (just using the add button) and remove the item without the option value (just select from the pull down list and use the delete button from the keyboard or java delete button).

itsallkizza · 12-16-2008, 06:49 PM

The functions and framework I spent time creating for you give you the capability to do anything you want.

If you want to add blank or pre-valued options with only a button, then go for it - the code is all there.