external javascript to populate select options

[lolodede]

i have external javascript

var titles = new Array();
        titles[0] = "Mr";
        titles[1] = "Mrs";
        titles[2] = "Miss";
        titles[3] = "Ms";
	titles[4] = "Dr";

var courseNum = new Array();       //this array is in parallel with the courseName array.
        courseNum[0] = "3503";
        courseNum[1] = "3508";
        courseNum[2] = "3633";
        courseNum[3] = "3639";
        courseNum[4] = "7005";
	courseNum[5] = "1624";

var courseName = new Array();          //this array is in parallel with the courseNum array.
        courseName[0] = "Bachelor of Industrial Design";
        courseName[1] = "Bachelor of Information Technology";
        courseName[2] = "Bachelor of Computing";
        courseName[3] = "Bachelor of Information and Communications Technology";
        courseName[4] = "Diploma in Information and Communications Technology";
	courseName[5] = "Bachelor of Design Studies";

saves as assignone.js
i want to put titles into select like html read it from external to put it into select
same thing for others but i want to when the user select one of the course numbers automaticaly appear the course name
thanks

[acoder]

It doesn't make a difference whether it's in an external file or included within the HTML file (though it's good practice to keep it separate).

Your problem is related to populating select elements from arrays. What have you managed so far?

PS. please use [code] tags - it makes it much easier to read and follow the code.

[lolodede]

im new to these staff i couldnt do anything and i have books of javascript but dont help i need some hints
thanks could be as soon as possible please

[acoder]

OK, let's start with the titles first (though it's probably better done in HTML rather than using JavaScript).

You need to loop over the array (for, while, etc) and take each item and add an option to the select:

var selObj = document.getElementById("selObj");
for (...
    //one possible way
    selObj.options[i] = new Option(titles[i],titles[i]);
}

[lolodede]

ive done this for titles

<!--hide from non-script browsers

var message1 = "<p>Titles:  ";

function show(obj)
{
   var index=obj.selectedIndex;
   var colourID = obj.options[index].value;
   var message =  colourID;

  
}
// hidden scripts above -->
  in body of html<script type="text/javascript">
<!--hide from no-script browsers

  document.write(message1);

  document.write('<select name="colours" onChange="show(this);">');

  for(i=0; i<titles.length; i++)
  {
     document.write('<option value=' +titles[i]+ '>' +titles[i]+ '</option>');
  }

  document.write('</select></p>');

// hidden scripts above -->
</script>

but i dont noe hoe to do other two cause course number need to be mandtory
thanks for answering so quick please help

[acoder]

Why are you using document.write when you can just code up HTML?

Please use [code] tags - the last time you'll be told nicely. See How To Ask a Question
-Moderator

[lolodede]

i dont know how to do that

[acoder]

For your code:

Titles:  
<select name="colours" onChange="show(this);">
    <option value="Mr">Mr</option>
    <option value="Mrs">Mrs</option>
    ...
</select>

[lolodede]

thanks alot for ur help

[acoder]

No problem. It could be improved further:

<select name="colours" onchange="show();">

and the JavaScript

function show() {
   var index = this.selectedIndex;
   var colourID = this.options[index].value;
   // or even:
   // var colourID = this.value;
   var message =  colourID;
}