Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New Coder
    Join Date
    Jul 2006
    Location
    Cincinnati, OH
    Posts
    85
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Populate a select list using javascript

    I've got a javascript array of different online course bundles. Each bundle has an array of the courses included in it. Here is my array:

    Code:
    var bundleArray = new Array(999);
    bundleArray[0] = new Array(999);
    bundleArray[0]['bundleTitle'] = ''; 
    bundleArray[0]['bundleSku'] = '';
    bundleArray[1] = new Array(999);
    bundleArray[1]['bundleTitle'] = 'A 2 Course Bundle for Ohio and Kansas'; 
    bundleArray[1]['bundleSku'] = '2 course bundle';
    bundleArray[1]['includedCourses'] = new Array(2);
    bundleArray[1]['includedCourses'][0] = 'KS_8hr_Mortgage_Education';
    bundleArray[1]['includedCourses'][1] = 'OH_6hr_Mortgage_Education';
    bundleArray[2] = new Array(999);
    bundleArray[2]['bundleTitle'] = 'A 3 course Alabama Bundle'; 
    bundleArray[2]['bundleSku'] = '3 course bundle';
    bundleArray[2]['includedCourses'] = new Array(3);
    bundleArray[2]['includedCourses'][0] = 'AL_12hr_Mortgage_Education';
    bundleArray[2]['includedCourses'][1] = 'AL_12hr_Processing_Power';
    bundleArray[2]['includedCourses'][2] = 'AL_State_Law_12hr_Supplement';
    bundleArray[3] = new Array(999);
    bundleArray[3]['bundleTitle'] = 'A 4 course California Bundle'; 
    bundleArray[3]['bundleSku'] = '4 course bundle';
    bundleArray[3]['includedCourses'] = new Array(4);
    bundleArray[3]['includedCourses'][0] = 'CA_3hr_Agency';
    bundleArray[3]['includedCourses'][1] = 'CA_3hr_Ethics';
    bundleArray[3]['includedCourses'][2] = 'CA_3hr_Trust';
    bundleArray[3]['includedCourses'][3] = 'AV_TEST_2';
    There is a drop down list at the top of the page that has all of the Bundles as its options. When I click on a bundle I want to populate a select list with the courses that are included in the selected bundle.

    Any ideas on what I need to do?

  • #2
    New Coder
    Join Date
    Jul 2006
    Location
    Cincinnati, OH
    Posts
    85
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I've found a few scripts online to help me and they are making sense but I keep getting an error in firebug that I can't figure out. Here is a portion of my javascript from my source code where I am getting the error:

    Code:
    var bundleArray = new Array(999);
    bundleArray[0] = new Array(999);
    bundleArray[0]['bundleTitle'] = ''; 
    bundleArray[0]['bundleSku'] = '';
    bundleArray[1] = new Array(999);
    bundleArray[1]['bundleTitle'] = 'A 2 Course Bundle for Ohio and Kansas'; 
    bundleArray[1]['bundleSku'] = '2 course bundle';
    bundleArray[1]['includedCourses'] = new Array(2);
    bundleArray[1]['includedCourses'][0] = 'KS_8hr_Mortgage_Education';
    bundleArray[1]['includedCourses'][1] = 'OH_6hr_Mortgage_Education';
    bundleArray[2] = new Array(999);
    bundleArray[2]['bundleTitle'] = 'A 3 course Alabama Bundle'; 
    bundleArray[2]['bundleSku'] = '3 course bundle';
    bundleArray[2]['includedCourses'] = new Array(3);
    bundleArray[2]['includedCourses'][0] = 'AL_12hr_Mortgage_Education';
    bundleArray[2]['includedCourses'][1] = 'AL_12hr_Processing_Power';
    bundleArray[2]['includedCourses'][2] = 'AL_State_Law_12hr_Supplement';
    bundleArray[3] = new Array(999);
    bundleArray[3]['bundleTitle'] = 'A 4 course California Bundle'; 
    bundleArray[3]['bundleSku'] = '4 course bundle';
    bundleArray[3]['includedCourses'] = new Array(4);
    bundleArray[3]['includedCourses'][0] = 'CA_3hr_Agency';
    bundleArray[3]['includedCourses'][1] = 'CA_3hr_Ethics';
    bundleArray[3]['includedCourses'][2] = 'CA_3hr_Trust';
    bundleArray[3]['includedCourses'][3] = 'AV_TEST_2';
    document.courseForm.FORM_bundleTitle.value = bundleArray[document.courseForm.selectedBundle.options[document.courseForm.selectedBundle.selectedIndex].value]['bundleTitle'];
    document.courseForm.FORM_bundleSku.value = bundleArray[document.courseForm.selectedBundle.options[document.courseForm.selectedBundle.selectedIndex].value]['bundleSku'];
    document.courseForm.FORM_pntr.value = document.courseForm.selectedBundle.options[document.courseForm.selectedBundle.selectedIndex].value;
    document.courseForm.pntr.value = document.courseForm.selectedBundle.options[document.courseForm.selectedBundle.selectedIndex].value;}
    if(bundleArray[document.courseForm.selectedBundle.options[document.courseForm.selectedBundle.selectedIndex].value]['includedCourses']){ clearOptions(document.courseForm.selectedCourses);}
    It is giving me an error on the bolded line saying "bundleArray is not defined" even though it is clearly defined above it. What do I need to be looking at when I get this error? It has been driving me crazy trying to figure it out since it doesn't seem like there should be an error.

  • #3
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There is a '}' at the end of the line right before the bolded line with no related '{'. It's possible that might be part of the problem.

    david_kw

  • #4
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Like this?

    http://bonrouge.com/demos/fill_select_from_array.htm

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>fill select from array</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    body {
    background-color:white;
    }
    </style>
    <script type="text/javascript">
    
    var bundleArray = new Array();
    bundleArray[0] = new Array(999);
    bundleArray[0]['bundleTitle'] = 'A 2 Course Bundle for Ohio and Kansas'; 
    bundleArray[0]['bundleSku'] = '2 course bundle';
    bundleArray[0]['includedCourses'] = new Array(2);
    bundleArray[0]['includedCourses'][0] = 'KS_8hr_Mortgage_Education';
    bundleArray[0]['includedCourses'][1] = 'OH_6hr_Mortgage_Education';
    bundleArray[1] = new Array(999);
    bundleArray[1]['bundleTitle'] = 'A 3 course Alabama Bundle'; 
    bundleArray[1]['bundleSku'] = '3 course bundle';
    bundleArray[1]['includedCourses'] = new Array(3);
    bundleArray[1]['includedCourses'][0] = 'AL_12hr_Mortgage_Education';
    bundleArray[1]['includedCourses'][1] = 'AL_12hr_Processing_Power';
    bundleArray[1]['includedCourses'][2] = 'AL_State_Law_12hr_Supplement';
    bundleArray[2] = new Array(999);
    bundleArray[2]['bundleTitle'] = 'A 4 course California Bundle'; 
    bundleArray[2]['bundleSku'] = '4 course bundle';
    bundleArray[2]['includedCourses'] = new Array(4);
    bundleArray[2]['includedCourses'][0] = 'CA_3hr_Agency';
    bundleArray[2]['includedCourses'][1] = 'CA_3hr_Ethics';
    bundleArray[2]['includedCourses'][2] = 'CA_3hr_Trust';
    bundleArray[2]['includedCourses'][3] = 'AV_TEST_2';
    
    function fill() {
    	var bTitles=document.getElementById('bTitles');
    	var courses=document.getElementById('courses');
    	for (i=0; i<bundleArray.length; i++) {
    		var bTitle=bundleArray[i]['bundleTitle'];
    		var opt=document.createElement('option');
    		var val=document.createAttribute('value');
    		var title=document.createTextNode(bTitle);
    		opt.appendChild(title);
    		val.value = title.nodeValue;
    		opt.setAttributeNode(val)
    		document.getElementById('bTitles').appendChild(opt);
    	}
    	bTitles.onchange=function () {
    	var courses=document.getElementById('courses');
    		while(courses.childNodes[1]) {
    				courses.removeChild(courses.lastChild);
    				}
    		for (i=0; i<bundleArray.length; i++) {
    			var bTitle=bundleArray[i]['bundleTitle'];
    			if (this.value==bTitle) {
    				var theCourses=bundleArray[i]['includedCourses'];
    				for (i=0; i<theCourses.length; i++) {
    					var course=theCourses[i];
    					var opt=document.createElement('option');
    					var val=document.createAttribute('value');
    					var cName=document.createTextNode(course);
    					opt.appendChild(cName);
    					val.value = cName.nodeValue;
    					opt.setAttributeNode(val)
    					courses.appendChild(opt);
    				}
    			}
    		}
    	}
    }
    window.onload=fill;
    </script>
    </head>
    <body>
    <form method="post" action="#">
    <p><label>Title: <select id="bTitles"><option>-- select --</option></select></label>
    <label>Courses: <select id="courses"><option>-- select --</option></select></label></p>
    </form>
    </body>
    </html>

  • #5
    New Coder
    Join Date
    Jul 2006
    Location
    Cincinnati, OH
    Posts
    85
    Thanks
    1
    Thanked 0 Times in 0 Posts
    david_kw, the opening curly brace was in the line right before where I pasted from. From what I can tell all of my braces and stuff are correct. I guess I will just have to go through it line by line again.

    BonRouge, I guess I meant to say I wanted to populate a multi-select list but I am pretty sure your code is going to help me out a lot. I think I should be able to, hopefully, modify that for what I need. Thanks a ton!

  • #6
    New Coder
    Join Date
    Jul 2006
    Location
    Cincinnati, OH
    Posts
    85
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the help everyone, I was able to get my lists to populate like I needed them to.

    The next thing I am trying to do is take two arrays, the first being an array of every course we have available and the second being the array of courses that are included for each bundle, and compare them to remove the courses from the first array that are in the second array.

    So say there are a total of 241 available courses and there are 2 courses included in my first bundle. I want to compare those two arrays and remove the 2 courses in the second bundle from the first one, giving me 239 courses now in my first array while leaving the second array intact with its two original courses.

    What I am currently trying to do is add a for loop in to my function that populates the multiselect list that will compare the two and then remove the proper courses from array one. I tried looking for a js function that would do this but I couldn't find anything.

  • #7
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You should probably check this thread to see if it works for you

    http://www.codingforums.com/showthread.php?t=103388

    david_kw

  • #8
    New Coder
    Join Date
    Jul 2006
    Location
    Cincinnati, OH
    Posts
    85
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok, I'm trying to convert it over to work with arrays, and to subtract matching elements.

    So far I've got this:

    Code:
    function makeOneArray(array1,array2) {
    
    var count = array1.length - array2.length;  //get the length of the new array, which will be the difference of the two old ones
    newArray = new Array(count);  //create the new empty array
    
    for(var i=0; i<array2.length;i++) {
      var j;
      for(j=0; j<array1.length; j++) {
        if(array1[j] == array2[i]) {
          array1[j] == null;
        }
      }
      
    }
    I'm thinking that might do it? I'll give it a try and see what it does.
    Last edited by justincredible; 12-21-2006 at 10:57 PM.

  • #9
    New Coder
    Join Date
    Jul 2006
    Location
    Cincinnati, OH
    Posts
    85
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Well that gives me all sorts of screwy results. A lot of the items in array1 get duplicated when I run that script. I need to remove items, not add them!

  • #10
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by justincredible View Post
    Ok, I'm trying to convert it over to work with arrays, and to subtract matching elements.

    So far I've got this:

    Code:
    function makeOneArray(array1,array2) {
    
    var count = array1.length - array2.length;  //get the length of the new array, which will be the difference of the two old ones
    newArray = new Array(count);  //create the new empty array
    
    for(var i=0; i<array2.length;i++) {
      var j;
      for(j=0; j<array1.length; j++) {
        if(array1[j] == array2[i]) {
          array1[j] == null;
        }
      }
      
    }
    I'm thinking that might do it? I'll give it a try and see what it does.
    What exactly are you trying to convert? The function I pointed to took 2 arrays and made a new one that was the union of the two while removing duplicates. Isn't that what you wanted?

    Your code creates an array newArray that is never assigned anything other than an empty array object. Then does a loop around a boolean test that isn't assigned to anything. I'm not sure how you got screwy results at all. This code should product no results.

    I suggest testing the function and seeing if it works as is. Then making only the changes necessary for your needs.

    david_kw

  • #11
    New Coder
    Join Date
    Jul 2006
    Location
    Cincinnati, OH
    Posts
    85
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yeah now that I look at it, it wasn't the code that was giving me the problems. I fixed all that and you're right, this code does nothing.

    What I want to do is this:

    Array 1 has 240(for example) items, including the 4(another example) items in array 2. Obviously, array 2 has 4 items.

    I want to return the new array that has 236 items in it, or array 1 minus array 2.

    Is that a better explanation? Looking back I wasn't too clear when I tried to explain it the first time.

  • #12
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So you are saying that array1 is a complete set and array2 is a subset of array1?

    Like

    array1 = [ 5, 1, 3, 7, 6, 9, 8 ];
    array2 = [ 3, 9 ];

    Then the resulting array would be

    [ 5, 1, 7, 6, 8 ] ?

    Is that what you are looking for?

    david_kw

  • #13
    New Coder
    Join Date
    Jul 2006
    Location
    Cincinnati, OH
    Posts
    85
    Thanks
    1
    Thanked 0 Times in 0 Posts
    david, yeah that is what I am trying to do.

  • #14
    Regular Coder
    Join Date
    Jun 2004
    Posts
    565
    Thanks
    0
    Thanked 18 Times in 18 Posts
    Try this:
    Code:
    Object.prototype.flip = function()
    {
    	var
    		map = {},
    		x;
    		
    	for(x in this)
    	{
    		if(this.hasOwnProperty(x))
    		{
    			map[this[x]] = x;
    		}
    	}
    	return map;
    }
    Object.prototype.toArray = function()
    {
    	var
    		i = this.length - 1,
    		result = new Array(this.length);
    	
    	for(; i >= 0; --i)
    	{
    		result[i] = this[i];
    	}	
    	return result;
    }
    Array.prototype.continuous = function()
    {
    	var
    		result = [],
    		i = 0,
    		omitted = 0;
    		
    	for(; i < this.length; ++i)
    	{
    		if(undefined == this[i])
    		{
    			++omitted;
    		}
    		else
    		{
    			result[i - omitted] = this[i];
    		}
    	}
    	return result;
    }
    Array.prototype.diff = function()
    {
    	var
    		result,
    		map = this.flip(),
    		i = arguments.length - 1,
    		j;
    		
    	for(; i >= 0; --i)
    	{
    		if(arguments[i] instanceof Array)
    		{
    			for(j = arguments[i].length - 1; j >= 0; --j)
    			{
    				map[arguments[i][j]] = this.length;
    			}
    		}
    		else
    		{
    			map[arguments[i]] = this.length;
    		}
    	}
    	map = map.flip();
    	map[this.length] = undefined;
    	map.length = this.length;
    	return map.toArray().continuous();
    }
    
    var
    	a = [5, 1, 3, 7, 6, 9, 8],
    	b = [3, 9];
    
    alert(a.diff(b));
    dumpfi
    Last edited by dumpfi; 12-22-2006 at 02:57 PM.
    "Failure is not an option. It comes bundled with the software."
    ....../)/)..(\__/).(\(\................../)_/)......
    .....(-.-).(='.'=).(-.-)................(o.O)...../<)
    ....(.).(.)("}_("}(.)(.)...............(.)_(.))Ż/.
    ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
    Little did the bunnies suspect that one of them was a psychotic mass murderer with a 6 ft. axe.

  • #15
    New Coder
    Join Date
    Jul 2006
    Location
    Cincinnati, OH
    Posts
    85
    Thanks
    1
    Thanked 0 Times in 0 Posts
    dumpfi, thanks for trying to help but I can't really follow your code. I'm very new to javascript and yours seems pretty complicated. I'm thinking I may need javascript for dummies.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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