www.webdeveloper.com
Results 1 to 9 of 9

Thread: adding/removing items manually from 2 level interdependent lists

  1. #1
    Join Date
    Feb 2013
    Posts
    4

    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. #2
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180
    I did this a while ago, see if it does something similar to what you want to achieve:

    priklad3.zip

  3. #3
    Join Date
    Feb 2013
    Posts
    4
    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. Here is a sample image so that everyone can get an idea.

    http://img96.imageshack.us/img96/417/selectfields.png

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

  4. #4
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180
    Well, the bottom comboboxes had that parent-child relationship. I removed the listboxes with arrows and made the comboboxes with size=10. The options text in #cb0 are the keys to the goasData object. I made it global, so you can add the Add/Rename/Remove functionality, however these values will be reset after page refresh. The line:

    D.ev( window, "load", hLoad );

    just says that the function hLoad should be called after all the elements are loaded. I was too lazy to write element.addEventListener(), document.getElementById() and such, so i made the global object D, which has shortcuts for some commonly used functions. In the hLoad function, there's again just one listener for #cb0 change, which calls changeOptions(). There the magic with dynamic fill happens; i'm sure it's not hard to understand.

    I think you can build atop of this. If you don't like my D object, you don't have to use it. Maybe you'd want to use some jQuery to spare your keyboard, i don't know. Try something yourself and i can help you further.

  5. #5
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,268
    See, for example, this link Changing Select element content on the fly

  6. #6
    Join Date
    Feb 2013
    Posts
    4
    Haulin: The thing is that in the sample you provided, values are already set and I want to make exactly the same thing but with values that the user inserts from an input field.
    As you can see I am not very experienced with Javascipt. I will try to use some of your code and get it to work to what I want to do. Thank you for providing the sample!

    007Julien: I found exactly the same link yesterday. Again, I thought that sample already contained set values. I will take a look again.

    On the other hand, I was thinking using a hash table instead. Would that be better?

  7. #7
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180
    listboxes0.zip

    I am sorry, i forgot the attachment last time. Here are the changes, that i was talking about...

  8. #8
    Join Date
    Feb 2013
    Posts
    4

    Unhappy

    Thank you for the file.
    As you can assume I am a beginner in javascript but I can read and understand your code.
    The problem is that I want to add the values just like in your code but from an input field.

    Suppose the user opnes the html file and both boxes are empty. Then the user starts populating from input fields and and an add/delete button.

    I can do that if slect menus were independent but as there is a parent/child select menu I don't know how to relate them. I was thinking of making dummy slect menus, put the values there and call the child options whenever the user calls them by clicking on the parent option from the parent select menu but I do not know how I can append them.

  9. #9
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180
    Well, the JS part is easy for me, but i don't want to invent your UI. Forget my sample. Do the HTML part with some styling, use appropriate captions for buttons, text input fields, position it, so it would be clear, which element belongs to which group... You know, make it look how you want it (maybe sth like in the pic in post #3) and i will breathe the life into it

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles