adding/removing items manually from 2 level interdependent lists

[Edokun4]

I found similar topics and some are similar but not exactly to what I want to do.

From a 2 level interdependent select list, I want the user to be able to add/modify/remove items.

Something similar to what is in here;

http://www.javascriptkit.com/javatut...content2.shtml

Any help will be greatly appreciated!

[Philip M]

Use this as a template:-

<form name='myform'>
<select name = 'list1' id = 'list1' onchange = "removeOptions(this)">
<option selected value=""> Choose A Fruit</option>
<option value='Mango'> Mango </option>
<option value='Apple'> Apple </option>
<option value='Sunkist'> Sunkist </option>
<option value='Watermelon'> Watermelon </option>
<option value='Papaya'> Papaya </option>
<option value='Strawberry'> Strawberry </option>
<option value='Banana'> Banana </option>
<option value='Peach'> Peach </option>
</select>

<select name = 'list2' id = 'list2'>
<option value = ""> You have selected:- </option>
</select>

</form>

<script type = "text/javascript">
var val = "";
function removeOptions(selectbox) {
val = selectbox.value;
for (var i = selectbox.options.length-1; i>=1; i--) {
if (selectbox.options[i].selected) {
selectbox.remove(i);
addOption(document.myform.list2,val,val);
document.myform.list1.focus();
}
}
}

function addOption(selectbox,optiontext,optionvalue ) {
var optn = document.createElement("OPTION");
optn.text = optiontext;
optn.value = optionvalue;
selectbox.options.add(optn);
}

</script>

You can selectively remove a single option without performing mass destructionon all options within select list by setting the desired option to null. Doing so removes the option from the list, with the options below it moving up to occupy the void:-

document.myform.list1.options[1]=null;

Q: How do you keep an idiot in suspense?
A: I'll tell you later

[Edokun4]

Apologies for my lack of explanation

I want to have 2 select fields. The one on the left is supposed to have parent categories and the one on the right child categories. Just as in the URL I posted.

The thing is, I want the user to be able to add/modify/delete parent and child categories from text fields and buttons. I am attaching a sample image so that everyone can get an idea.

I know it is too much to ask. I've done that in the past pulling categories from databases but never with variables ;(