By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,702 Members | 1,760 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,702 IT Pros & Developers. It's quick & easy.

external javascript to populate select options

P: 63
i have external javascript
Expand|Select|Wrap|Line Numbers
  1. var titles = new Array();
  2.         titles[0] = "Mr";
  3.         titles[1] = "Mrs";
  4.         titles[2] = "Miss";
  5.         titles[3] = "Ms";
  6.     titles[4] = "Dr";
  7.  
  8. var courseNum = new Array();       //this array is in parallel with the courseName array.
  9.         courseNum[0] = "3503";
  10.         courseNum[1] = "3508";
  11.         courseNum[2] = "3633";
  12.         courseNum[3] = "3639";
  13.         courseNum[4] = "7005";
  14.     courseNum[5] = "1624";
  15.  
  16. var courseName = new Array();          //this array is in parallel with the courseNum array.
  17.         courseName[0] = "Bachelor of Industrial Design";
  18.         courseName[1] = "Bachelor of Information Technology";
  19.         courseName[2] = "Bachelor of Computing";
  20.         courseName[3] = "Bachelor of Information and Communications Technology";
  21.         courseName[4] = "Diploma in Information and Communications Technology";
  22.     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
Apr 13 '09 #1
Share this Question
Share on Google+
9 Replies


acoder
Expert Mod 15k+
P: 16,027
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.
Apr 13 '09 #2

P: 63
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
Apr 13 '09 #3

acoder
Expert Mod 15k+
P: 16,027
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:
Expand|Select|Wrap|Line Numbers
  1. var selObj = document.getElementById("selObj");
  2. for (...
  3.     //one possible way
  4.     selObj.options[i] = new Option(titles[i],titles[i]);
  5. }
Apr 13 '09 #4

P: 63
ive done this for titles
Expand|Select|Wrap|Line Numbers
  1. <!--hide from non-script browsers
  2.  
  3. var message1 = "<p>Titles:  ";
  4.  
  5. function show(obj)
  6. {
  7.    var index=obj.selectedIndex;
  8.    var colourID = obj.options[index].value;
  9.    var message =  colourID;
  10.  
  11.  
  12. }
  13. // hidden scripts above -->
  14.   in body of html<script type="text/javascript">
  15. <!--hide from no-script browsers
  16.  
  17.   document.write(message1);
  18.  
  19.   document.write('<select name="colours" onChange="show(this);">');
  20.  
  21.   for(i=0; i<titles.length; i++)
  22.   {
  23.      document.write('<option value=' +titles[i]+ '>' +titles[i]+ '</option>');
  24.   }
  25.  
  26.   document.write('</select></p>');
  27.  
  28. // hidden scripts above -->
  29. </script>
but i dont noe hoe to do other two cause course number need to be mandtory
thanks for answering so quick please help
Apr 13 '09 #5

acoder
Expert Mod 15k+
P: 16,027
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
Apr 13 '09 #6

P: 63
i dont know how to do that
Apr 13 '09 #7

acoder
Expert Mod 15k+
P: 16,027
For your code:
Expand|Select|Wrap|Line Numbers
  1. Titles:  
  2. <select name="colours" onChange="show(this);">
  3.     <option value="Mr">Mr</option>
  4.     <option value="Mrs">Mrs</option>
  5.     ...
  6. </select>
Apr 14 '09 #8

P: 63
thanks alot for ur help
Apr 14 '09 #9

acoder
Expert Mod 15k+
P: 16,027
No problem. It could be improved further:
Expand|Select|Wrap|Line Numbers
  1. <select name="colours" onchange="show();">
and the JavaScript
Expand|Select|Wrap|Line Numbers
  1. function show() {
  2.    var index = this.selectedIndex;
  3.    var colourID = this.options[index].value;
  4.    // or even:
  5.    // var colourID = this.value;
  6.    var message =  colourID;
  7. }
Apr 14 '09 #10

Post your reply

Sign in to post your reply or Sign up for a free account.