Inserting New Option

Antoniohawk

04-30-2004, 01:30 AM

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.

<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>

Easier to see what the script is attempting to accomplish: [http://www.graphics-forum.com/manicpyro/MenuDev.html]

Willy Duitt

04-30-2004, 08:14 AM

You are using at least two reserved words for your variable names.
Change those to something else and it should work.

eg:
var value = parseInt(list.options[e].value);
var length = list.options.length;alert(list.options[length-1])

(at least it did for me when I changed those and commented out this line)
//list.options[i + 1] = list.options[i];

But then again, I'm not sure what I am looking at. ;)

.....Willy

Antoniohawk

04-30-2004, 11:56 PM

Darn those reserved words... Thanks for the help Willy, I will try that out.

Antoniohawk

05-01-2004, 12:17 AM

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.

Thanks

sad69

05-01-2004, 12:50 AM

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..

Good luck,
Sadiq.

Antoniohawk

05-01-2004, 01:29 AM

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.

swmr

05-01-2004, 04:25 PM

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);

Antoniohawk

05-01-2004, 05:48 PM

Is there an insertAfter?

swmr

05-02-2004, 12:02 AM

Not that I'm aware of, though insertBefore ... nextSibling seems to work even if no next sibling exists... try using it along with createElement.