...

View Full Version : Populate a select list using javascript



justincredible
12-20-2006, 08:06 PM
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:


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?

justincredible
12-20-2006, 11:48 PM
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:


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.

david_kw
12-21-2006, 01:54 AM
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

BonRouge
12-21-2006, 09:11 AM
Like this?

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


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

justincredible
12-21-2006, 03:20 PM
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!

justincredible
12-21-2006, 07:55 PM
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.

david_kw
12-21-2006, 10:11 PM
You should probably check this thread to see if it works for you

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

david_kw

justincredible
12-21-2006, 10:35 PM
Ok, I'm trying to convert it over to work with arrays, and to subtract matching elements.

So far I've got this:



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.

justincredible
12-21-2006, 11:07 PM
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!

david_kw
12-21-2006, 11:20 PM
Ok, I'm trying to convert it over to work with arrays, and to subtract matching elements.

So far I've got this:



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

justincredible
12-21-2006, 11:28 PM
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.

david_kw
12-22-2006, 04:47 AM
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

justincredible
12-22-2006, 05:26 AM
david, yeah that is what I am trying to do.

dumpfi
12-22-2006, 02:53 PM
Try this:
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

justincredible
12-22-2006, 03:18 PM
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.

justincredible
12-22-2006, 03:47 PM
Here is what I have now:


function makeOneArray(array1,array2) {
for(var i=0; i<array2.length;i++) {
array2[i] = array2[i].replace(/_/g,\" \");
for(j=0; j<array1.length; j++) {
if(array1[j] == array2[i]) {
array1[j] = null;
}
}
}
clearMultiSelect(document.courseForm.availableCourses);
addToMultiSelect(document.courseForm.availableCourses,array1);
}

It seems to be closer to what I am looking for but it deletes everything from the array1 after it is compared with the first item in array2.

For example:
array1 = [1,2,3,4,5,6,7,8,9]
array2 = [4,7,8]

After going through this code array1 = [1,2,3]

It should be array1 = [1,2,3,5,6,9]

I'm thinking array1[j] = null; is the culprit. Is that not the way to destroy a single item out of an array?

justincredible
12-22-2006, 07:24 PM
Ok the script wasn't the reason I was getting the earlier problems.

As of right now this script is almost good. The only problem is when my new array looks like array1=[1,2,3,null,5,6,null,null,9]. What do I need to do to remove it from the array instead of it just changing it to "null"?

justincredible
12-22-2006, 10:33 PM
Well it took me a while but I finally got everything working the way I want it to. Thanks to everyone for their help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum