Jump to content

Checkbox Displays Dropdown


kyleseitz
 Share

Recommended Posts

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/

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by kyleseitz
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

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...