How would I go inserting a new option right after the one that is selected? The following is my code. In blue is the function in question that adds the new option.
Code:
<html>
<head>
<style type="text/css">
body {
font: small verdana, arial, sans-serif;
}
#builder li {
margin: 5px 0 5px 0;
}
#cont li {
margin: 5px 0 5px 0;
}
input, select, table {
font: x-small verdana, arial, sans-serif;
}
</style>
<script type="text/javascript">
function change(e){
if (document.daForm.listItems.options[e].value == 0){
document.daForm.listItems.options[e].text = document.daForm.changeName.value;
}
else {
var value = document.daForm.listItems.options[e].value;
var underS = '';
for(i = 0; i < value; i++){
underS += '_';
}
var foo = underS + document.daForm.changeName.value + "|" + document.daForm.changeUrl.value;
document.daForm.listItems.options[e].text = foo;
}
}
function update(e){
num = document.daForm.listItems.options[e].value.replace(/\D+/,'');
p = document.daForm.listItems.options[e].value.replace(/\d+/,'');
if (p == 'parent'){
document.daForm.changeUrl.disabled = true;
document.daForm.changeName.value = document.daForm.listItems.options[e].text;
document.daForm.changeName.value = document.daForm.listItems.options[e].text;
}
else {
document.daForm.changeUrl.disabled = false;
var e = document.daForm.listItems.options[e].text;
e = e.replace(/^_+/,'');
foo = e.split('|');
document.daForm.changeName.value = foo[0];
document.daForm.changeUrl.value = foo[1];
}
}
function deleteMe(){
var num = document.daForm.listItems.selectedIndex;
document.daForm.listItems.options[num] = null;
}
function addMe(e){
var list = document.daForm.listItems; // var list references the <select> for this function
var value = parseInt(list.options[e].value); // var value is an int of the value of the selected index
var underS = ''; // new variable underS
for(i = 0; i < value + 2; i++){ // adds the right # of underscores to child
underS += '_';
}
var foo = underS + document.daForm.changeName.value + "|" + document.daForm.changeUrl.value; // sets the text for this new element
alert(foo);
value = value + 2 + ''; // converts value to a string
var myNewOption = new Option(foo,value);
var length = list.options.length;
alert(length);
var bumpOption = new Option(list.options[length - 1],list.options[length - 1].value); //copies the last element
document.daForm.listItems.options[length] = bumpOption; //adds the copy to the end
for(var i = (length - 1); i > 0; i--){ //starts at 2nd to last element and works down bumping them up one index.
list.options[i + 1] = list.options[i];
alert('loopage!');
alert('i == ' + i + ' length: ' + length);
}
list.options[e + 1] = myNewOption;
}
</script>
</head>
<body>
<form name="daForm">
<table style="border: 1px solid #000;" cellspacing="0">
<tr style="background-color: #EEE;">
<td rowspan="2">
<select multiple="multiple" name="listItems" size="5" style="width: 325px;" onChange="update(this.selectedIndex)">
<option value="0parent">Parent</option>
<option value="2parent">__Child|Url</option>
<option value="4">____Child|Url</option>
</select>
</td>
<td>
Name:
</td>
<td>
<input type="text" name="changeName" />
</td>
<td rowspan="2" style="text-align: center; background-color: #424242;">
<input type="button" value="Change" onclick="change(document.daForm.listItems.selectedIndex)" /><br />
<input type="button" value="Add" onclick="addMe(document.daForm.listItems.selectedIndex)" /><br />
<input type="button" value="Delete" onclick="deleteMe()" />
</td>
</tr>
<tr>
<td style="background-color: #CCC;">
Url:
</td>
<td style="background-color: #CCC;">
<input type="text" name="changeUrl" />
</td>
</tr>
</table>
</form>
</body>
</html>
The reserved words have been changed, but I still seem to be having the same problems as before. Thusly, it must be a flaw in the logic of my code. Let me attempt to explain what I'm trying to do.
The purpose of this script is to be able to add children to different parent and to make new parents. These parents and their children are indicated by the number of underscores which represent indentation that I have decided to accomplish in this way. The gist of it is that when you have something selected, the add button is clicked creating a child of the selected with 2 more underscores denoting the fact that it is a child. If I'm not mistaken, some sort of looping must be done in order to bump every acceding option so that the new child will reside after the selected item. I'm thinking that the loop is where I'm having problems. Any ideas on a way to approach this or just plain code would be great.
I'm thinking that maybe you can't insert options in the middle, only to the end?
Maybe you'd be better off creating a new select and add the options the way you want, deleting the old select, and putting the new one in. That's my thought anyway..
My theory was that if you bump each consecutive element after the selected parent, up one index, then you can just insert the new child into the empty slot.
If its just a matter of inserting a new option element beneath the current selection, one could use something like: SelectObject.insertBefore(NewOptElement, ...options[options.selectedIndex].nextSibling);
Before you post, read our: 
