www.webdeveloper.com
Results 1 to 4 of 4

Thread: Java script to dynamically populate dropdown box in HTML

  1. #1
    Join Date
    Nov 2013
    Posts
    4

    Java script to dynamically populate dropdown box in HTML

    What I am trying to do is to populate an html dropdown list with values from a file. I also need it coded to where it will look in the first field for a value from one dropdown box and then populate another dropdown box. I am trying to understand Java script, but I am not sure if I would be able to do this with Java Script. If not java script maybe a different client-side development.

    The file will have a list of names which I have coded into the HTML, but this list changes. So I need a way to pull the information from the file. The first row will not be displayed in the HTML file as this will be coded into the web page.

    County City<br>
    Davidson Antioch<br>
    Davidson Nashville<br>
    Rutherford Smyrna

    When someone selects the county Davidson from the html form i want it to show the davidson cities in the other dropdown box for them to select. The code I have been using to achieve this without the file is as follows:

    <htmL>
    <title>
    </title>



    <body>
    <script type="text/javascript">


    function configureDropDownLists(county,city) {
    var Davidson = new Array('', 'Antioch', 'Nashville');
    var Rutherford = new Array('', 'Smyrna', 'LaVergne');

    switch (county.value) {
    case 'Davidson':
    document.getElementById(city).options.length = 0;
    for (i = 0; i < Davidson.length; i++) {
    createOption(document.getElementById(city), Davidson[i], Davidson[i]);
    }
    break;
    case 'Rutherford':
    document.getElementById(city).options.length = 0;
    for (i = 0; i < Rutherford.length; i++) {
    createOption(document.getElementById(city), Rutherford[i], Rutherford[i]);
    }
    break;
    }

    }

    function createOption(county, text, value) {
    var opt = document.createElement('option');
    opt.value = value;
    opt.text = text;
    county.options.add(opt);
    }
    </script>
    <tr>
    <td>County Name: </td>
    <td><select id="county" onchange="configureDropDownLists(this,'city');">
    <option value=""></option>
    <option value="Davidson">Davidson</option>
    <option value="Rutherford">Rutherford</option>
    </select></td>
    </tr><br>
    <tr>
    <td>City: </td>
    <td><select id="city">
    </select></td>
    </tr>


    </body>
    </html>

    I am not sure how to get the data from my file to do the same as how this code works. I need the first column to be searched and the second column to be displayed with javascript, activeX, or any other coding language that can do the trick in a web page from the client's side. The file will be located on a shared drive along with the web page in the same directory which is not on a server, this is why i need it to be on the client-side.

  2. #2
    Join Date
    Nov 2013
    Posts
    4
    The file can be in any format, that is why i just said file. I am not sure what files this can be done from.

  3. #3
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,636
    file.js(the file)

    Code:
    var arr=[
    ['Davidson',['Davidson city 1','Davidson city 2','Davidson city 3','Davidson city 4','Davidson city 5']],
    ['Rutherford',['Rutherford city 1','Rutherford city 2','Rutherford city 3']]
    ];


    index.htm

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>title</title>
    <script src="file.js"></script>
    <script>
    function doc(id){return document.getElementById(id);}
    function buildCounty(){
    var opts=doc('county').options;
    for(var i=0;i<arr.length;i++){
    opts[opts.length]=new Option(arr[i][0],arr[i][0]);
    }
    doc('county').onchange=function(){
    this.blur();
    var val=this.value;
    if(!val){return;}
    var co=doc('city').options;
    co.length=1;
    for(var j=0;j<arr.length;j++){
    if(arr[j][0]!==val){continue;}
    else{
    var temp=arr[j][1];
    for(var k=0;k<temp.length;k++){
    co[co.length]=new Option(temp[k],temp[k]);
    }
    break;
    }
    }
    }
    }
    
    window.onload=buildCounty;
    </script>
    </head>
    <body>
    <table align="center" cellspacing="3" cellpadding="3">
    <tr>
    <td>County Name: </td>
    <td><select id="county"><option value="">Select county</option></select></td>
    </tr>
    <tr>
    <td>City: </td>
    <td><select id="city"><option value="">Select city</option></select></td>
    </tr>
    </table>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,036
    For what its worth, this is something I have been musing over for a couple of hours whilst working on other things...

    HTML Code:
    <htmL>
    <title>
    </title>
    
    
    
    <body>
    <script type="text/javascript">
    place = {
    	Davidson:['Antioch', 'Nashville'],
    	Rutherford:['Smyrna', 'LaVergne']
    	}
    
    function clearOpts(target){
    	sel = document.info[target].options;
    	for (i = sel.length - 1; i >= 0; i--)
    		sel.remove(i);
    }
    
    function configureDropDownLists(o,city) {
    	if(document.info[city].options.length!=0) clearOpts(city);
    	selected = o.selectedIndex;
    	if(selected==0) return;
    	city = o.options[selected].value;
    	for (i = 0; i < place[city].length; i++) {
    				createOption('city', place[county.value][i], place[county.value][i]) 
    			}
    			
    }
    
    function createOption(target, label, value) {
    	opts = document.info[target];
    	opts.options.add(new Option(label,value) );
    }
    
    </script>
    <form name="info">
    <tr>
    <td>County Name: </td>
    <td><select name="county" id="county" onchange="configureDropDownLists(this,'city');">
    <option value=""></option>
    <option value="Davidson">Davidson</option>
    <option value="Rutherford">Rutherford</option>
    </select></td>
    </tr><br>
    <tr>
    <td>City: </td>
    <td><select name="city" id="city">
    </select></td>
    </tr>
    
    </form>
    </body>
    </html>
    The best approach IMHO is to use an object, this then forms part of the selection process and construction of the code means you now can eliminate some elements of the original code.
    Last edited by \\.\; 11-13-2013 at 06:56 PM.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles