adding/removing items manually from 2 level interdependent lists

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

adding/removing items manually from 2 level interdependent lists

Edokun4

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/javatutors/selectcontent2.shtml

Any help will be greatly appreciated!

haulin

I did this a while ago, see if it does something similar to what you want to achieve:

[ATTACH]15369[/ATTACH]

The attachments of this post were removed during the platform migration in 2018

Edokun4

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.

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

haulin

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.

007Julien

See, for example, this link Changing Select element content on the fly

Edokun4

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?

haulin

[ATTACH]15389[/ATTACH]

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

The attachments of this post were removed during the platform migration in 2018

Edokun4

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.

haulin

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