Jump to content

Dynamic Option Lists


spoonraker
 Share

Recommended Posts

I am using THIS script for dynamic option lists.It's pretty straightforward, you make a new list like suchvar dol = new DynamicOptionList(parent, child)You add options for the child list for each value of the parent list.What I need to do is make it so that the parent list changes two different lists to two separate option groups, instead of just one like it does now.Something like if you select "1" from list 1, list 2 gives you the options "1, 2, 3" and list 3 gives you the options "2, 3, 4"I already have one DOL set up like this...var dol = new DynamicOptionList(parent, child1)and it works fine, but when I try to add another list with the same parentvar dol = new DynamicOptionList(parent, child2)it won't populate the second child with any values.I have tested both DOLs on their own and they both work, but it just doesn't like it when two separate lists have the same parent field. What should I do?

Link to comment
Share on other sites

also, the solution to this problem doesn't necessarily have to use that DOL library.The only thing the middle list contains are the operators =, >, and <. The only thing I'm trying to do is make it so that the > and < options are only available for certain options where it makes sense.If somebody knows a way to just toggle the visibility of drop down list options that I can use in an onclick event, or something like that, I would give it a shot.

Link to comment
Share on other sites

Update: just got an email back from the guy who created that script, and it turns out that his script simply does not support multiple child lists from the same parent.So does anybody know how to toggle on/off options in a drop down list? I have three options: =, >, and <. I need = to always be on, and < and > to only be visible for certain values of another drop down list.

Link to comment
Share on other sites

Here is an example of how you can modify a dropdown menu using javascript. Every time you click the "toggle" button, the dropdown gets rebuilt - in one state, there is only an equals , in the other state there is the equals and the less than and greater than symbols.

<html><body><button onclick="builddropdown(state); state=!state;">toggle</button><select id="operator" /><script type="text/javascript">function builddropdown(expanded){	// get a reference to the select element.	var ddl = document.getElementById("operator")	// clear out all the options.	ddl.options.length = 0;	// add the equals sign option every time.	var equals = document.createElement("option");	equals.value = 1	equals.appendChild(document.createTextNode("="));	ddl.appendChild(equals);	// only add the < and > options if expanded == true	if(expanded)	{		var gt = document.createElement("option");		gt.value = 2		gt.appendChild(document.createTextNode(">"));		ddl.appendChild(gt);		var lt = document.createElement("option");		lt.value = 2		lt.appendChild(document.createTextNode("<"));		ddl.appendChild(lt);	}}// this is just used so that the toggle button can toggle the state back and forth.var state = false;// build it once, the first time, with all options visible.builddropdown(true);</script></body></html>

Link to comment
Share on other sites

Thanks, I just got it figured out myself right before I checked this thread again lolI made enableEqualities(), disableEqualities(), and checkSelection() functions. Then on the first list I used onChange="checkSelection();"the checkSelection() uses SELECTBOXID.selectedIndex in an if statement to run the appropriate enable/disable functionthe enable function uses this method :var optn = document.createElement("OPTION");optn.text = ">";optn.value = ">";SELECTBOXID.options.add(optn);and the disable is like this :SELECTBOXID.remove(INDEX)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...