Checkbox Displays Dropdown

[kyleseitz]

Hey i've been researching this for a while and haven't been able to find a solution that works for me, I actually have 2 problems; Goal: Display 3 drop down boxes - the second value is dependent on the first and the third on the second.Display 3 checkboxes - When each/any are checked, display 3 dropdowns with the same specifications as the one that always shows up. Problem: If I comment out one of the dropdown codes, the other will work.Checkbox will not show/hide other dropdowns. I'm pretty new to javascript/html. Here's my Fiddle. I currently have 1 checkbox but if somebody can help me get that one going, I'm sure I can model that to get the other 2 to work. ANY help would be appreciated - Please! Fiddle:http://jsfiddle.net/kyleseitz/SLY95/

[justsomeguy]

That wasn't working for me at all. One issue is there were multiple line breaks in the middle of strings in the Javascript code, which isn't allowed in Javascript unless you escape them. Other than that, you have multiple functions defined with the same names, that's a problem. You can only have one function with a given name. If you need the same function to use different variables then you need to pass those variables to the function. The checkbox handler is referencing a function that doesn't exist, and the init function never runs when the page loads so there are never any options in the select lists. The jsfiddle website wraps all of the code in an onload handler, so it doesn't work there to attach another onload handler, it's never going to fire because the event already happened. When I try and correct those issues then the onchange handler for the select lists doesn't want to fire, the error console says the function doesn't exist. That's also because of jsfiddle, the function is defined in a local scope in the onload handler instead of a global scope. Do you have an example of this online somewhere else?

[kyleseitz]

It's not live anywhere. It's just saved locally to my machine under 2 documents (.html and .js). I'm trying to get this to work so I can do some other things with it before I make it live. I've found bits and pieces of my code from other sources, and like I said I'm fairly new to html and even newer to javascript. I'm sort of in a bind. If you copy and paste them into a notepad and save it under the appropriate extension, and comment out one of them, you can see one of the lists populates (if you comment the other one respectively, the other list works). I'm trying to both: get these lists to populate themselves andshow the second list based on the status of the checkbox.

[kyleseitz]

here my js: var categories = [];categories["startList"] = ["Bob Long","BT Battle Tested","DLX Luxe","DYE","Empire","Invert","JT","MacDev","PlanetEclipse","Machine","Tippmann","Valken"]//Then I populate the models with a new drop down//Then I populate the colors with a new drop down var markLists = 3; // number of lists in the set function fillSelect(markerCat,markerList){var markstep = Number(markerList.name.replace(/\D/g,""));for (i=markstep; i<markLists+1; i++) {document.forms[0]['List'+i].length = 1;document.forms[0]['List'+i].selectedIndex = 0;}var markCat = categories[markerCat];for (each in markCat) {var markOption = document.createElement('option'); var markData = document.createTextNode(markCat[each]); markOption.setAttribute('value',markCat[each]); markOption.appendChild(markData); markerList.appendChild(markOption); } } function getValue(isValue) {alert(isValue);} function init() {fillSelect('startList',document.forms[0]['List1'])} navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false); //For my second section, I want a checkbox to show this //Hopper Brandvar hopper = [];hopper["startList2"] = ["DYE","Empire","Virtue"] //Then I populate the models with a new drop down//Then I populate the colors with a new drop down var hopLists = 3; // number of lists in the set function fillSelect(hopperCat,curhopperList){var hopstep = Number(curhopperList.name.replace(/\D/g,""));for (j=hopstep; j<hopLists+1; j++) {document.forms[0]['hopperList'+j].length = 1;document.forms[0]['hopperList'+j].selectedIndex = 0;}var hopCat = hopper[hopperCat];for (each in hopCat) {var hopOption = document.createElement('option'); var hopData = document.createTextNode(hopCat[each]); hopOption.setAttribute('value',hopCat[each]); hopOption.appendChild(hopData); curhopperList.appendChild(hopOption); } } function getValue(isValue) {alert(isValue);} function init() {fillSelect('startList2',document.forms[0]['hopperList'])} navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false); my html: <!--!!!!!!!!!!!!!!!!!!!!!!! MARKER BUILD !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!--><form action=""><select name='List1' onchange="fillSelect(this.value,this.form['List2'])"><option selected>-Choose Your Marker-</option></select> <select name='List2' onchange="fillSelect(this.value,this.form['List3'])"><option selected>-Choose Your Model-</option></select> <select name='List3' onchange="getValue(this.value)"><option selected >-Pick a Color/Option-</option></select></form> <!--!!!!!!!!!!!!!!!!!!!!! HOPPER BUILD !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!--> <input type="checkbox" id="hopcheck" onClick="showHide('hopcheck')/"/><label for "hoppercheck">Add a Hopper</label> <form action=""><select name='hopperList1' onchange="fillSelect(this.value,this.form['hopperList2'])"><option selected>-Choose Your Hopper Manufactuer-</option></select> <select name='hopperList2' onchange="fillSelect(this.value,this.form['hopperList3'])"><option selected>-Choose Your Hopper Model-</option></select> <select name='hopperList3' onchange="getValue(this.value)"><option selected >-Pick a Hopper Color/Option-</option></select></form>

Edited June 7, 2013 by kyleseitz

[justsomeguy]

The reason why only one of them works at a time is because you have 2 sets of functions with the same names that do different things. You can only have one function with a certain name, so defining the function a second time overwrites the first one. The second time you define fillSelect it overwrites the other function. You should only have 1 init function that initializes everything, not one function per thing that needs to happen. For the fillSelect functions, you should again only have one function, and you should pass whatever variables it needs to use. These are the differences between the 2 fillSelect functions that need to be passed as variables instead of hard-coded: markLists/hopListselement name prefix (List/hopperList)categories/hopper So instead of the function taking 2 parameters, it should take 5. The existing 2, which look like value and the next select element, plus the number of lists variable for the current set, the element name prefix to use to reset the other elements, and the array of values. That way one function can handle every select on the page instead of duplicating functions or overwriting one. The event handler might look like this:

<select name='hopperList1' onchange="fillSelect(this.value, this.form['hopperList2'], hopLists, 'hopperList', hopper);">

The event handlers for the category selects would pass the variables for categories instead of hoppers, and the function would use whatever is passed to it and wouldn't use any global variables.

[kyleseitz]

I understand what you mean, but to be honest, I'm not sure how to implement this

[justsomeguy]

Just make all of the select or list specific stuff in the function use the variable that gets passed.

function fillSelect(cat, curList, nrLists, name, arList) {  var step = Number(curList.name.replace(/\D/g,""));  for (j=step; j<nrLists+1; j++) {	document.forms[0][name+j].length = 1;	document.forms[0][name+j].selectedIndex = 0;  }  var hopCat = arList[cat];  for (each in hopCat) {	var hopOption = document.createElement('option');	var hopData = document.createTextNode(hopCat[each]);	hopOption.setAttribute('value',hopCat[each]);	hopOption.appendChild(hopData);	curList.appendChild(hopOption);  }}

Compare that with your original function to see how it uses passed variables instead of global variables, so that it works for anything you pass to it.

[kyleseitz]

I see. Everything is just in the one function. Is nrList defined to be 3 still?

[justsomeguy]

You can pass whatever value you want it to be, if you pass markLists or hopLists then it will use whatever those are set to. You can still have all of your global variables defined, but when you write a function it shouldn't use the global variables, it should be passed whatever you want it to use. That way you can use it for multiple things.