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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    adding/removing items manually from 2 level interdependent lists

    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!

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,172
    Thanks
    203
    Thanked 2,549 Times in 2,527 Posts
    Use this as a template:-

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

    Code:
    document.myform.list1.options[1]=null;
    Q: How do you keep an idiot in suspense?
    A: I'll tell you later
    Last edited by Philip M; 02-05-2013 at 08:30 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 ;(
    Attached Thumbnails Attached Thumbnails adding/removing items manually from 2 level interdependent lists-selectfields.png  


  •  

    Posting Permissions

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