Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Inserting New Option

    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>
    Edit: Easier to see what the script is attempting to accomplish: [http://www.graphics-forum.com/manicpyro/MenuDev.html]
    Last edited by Antoniohawk; 04-30-2004 at 02:33 AM.

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by Willy Duitt; 04-30-2004 at 09:16 AM.

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Darn those reserved words... Thanks for the help Willy, I will try that out.

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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

  • #5
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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.

  • #7
    Regular Coder
    Join Date
    Feb 2003
    Posts
    638
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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);
    hmm... ?

  • #8
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Is there an insertAfter?

  • #9
    Regular Coder
    Join Date
    Feb 2003
    Posts
    638
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Not that I'm aware of, though insertBefore ... nextSibling seems to work even if no next sibling exists... try using it along with createElement.
    hmm... ?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •