Create Options Dropdown from Text File

**LupNo** · 11-16-2010, 01:48 PM

I have a simple dropdown form I would like to populate with the contents of a simple text file via javascript/jquery. Most solutions I've read either involve .php or are on .asp net forums and really can't be adapted because they're either way over what I'm trying to accomplish (chained selects) or rely on a server side language.

I have a couple simple text files:

colors.txt that reads like:
red
green
blue
pink
etc....

sizes.txt that reads like:
small
medium
large
etc....

I have a plain old HTML page with two forms (this is really stripped down for example purposes):

Code:

<form id="someform">
<select name="colors">
<option value="">...</option>
<option value="">...</option>
etc.
</select>

<select name="sizes">
<option value="">...</option>
<option value="">...</option>
etc.
</select>
</form>

I'd like to be able to read those plain text files into the option values with javascript/jquery rather than hard coding them. As much as I've looked, I can't find anything that simple. Is there a problem doing it this way, or do I need some other helper application to assist?

My apologies, but I did search the forum and could not find an answer with the search words I used.

Any assistance is greatly appreciated. I've been scouring forums for a couple days with no joy.

**Nile** · 11-17-2010, 01:56 AM

Hmm - I dont suggest this. But if you really needed to do this, I would take a look at some file_get_contents functions for javascript, such as:
http://phpjs.org/functions/file_get_contents:400 or http://forums.tizag.com/showthread.php?t=3496

I'm assuming the rest would be easier, you could use something like split() - http://www.w3schools.com/jsref/jsref_split.asp.

Good luck!

**LupNo** · 11-17-2010, 03:07 PM

@Nile

Not sure what you mean by I shouldn't do this. Is this a terrible idea? I thought it made sense to have a couple easily updated text files that could be called wherever, or not, and then piped through via javascript. To me, it's as simple as document write, with a wrapper of <option value="$value">$value</option> but it needs to read the file, first.

Reading the file and writing the wrapper is what I can't totally put together, because I really don't know the simplest way to do it. I would think it's a fairly common idea, though.

**Nile** · 11-18-2010, 10:46 PM

I read somewhere that it was a bad idea and I've stuck by that (lol). But still - using javascript to do a task like this is not something I would recommend. If your server does support PHP, I would use it - and I'm assuming it does (because of your $value variable). I read above that you really don't want to use PHP because it's a chain selection - can you tell me exactly what you're trying to do?

Thanks

**LupNo** · 11-19-2010, 12:08 PM

Originally Posted by Nile

I read somewhere that it was a bad idea and I've stuck by that (lol). But still - using javascript to do a task like this is not something I would recommend. If your server does support PHP, I would use it - and I'm assuming it does (because of your $value variable). I read above that you really don't want to use PHP because it's a chain selection - can you tell me exactly what you're trying to do?

Thanks

This is an HTML page that uses SSI (Perl) in places. While I could easily write a little routine to read the text file in Perl and write it line-by-line wrapped as so <option value="$value">$value</option> and make it another SSI include, I wanted to just call a javascript to do it. I can't turn around and make these PHP pages, is the problem. There are too many conflicts.

So far, I haven't found a solution despite searching numerous forums. It seems like it would be so easy: read a text file line by line, do a document write line by line using each line's "value" to propagate a drop down box. (This is not a chained select. Just a couple different drop-down boxes.) That's as fancy as I'm trying to get, which isn't very fancy, I admit.

**Nile** · 11-19-2010, 12:46 PM

If you use the open() function, split() function, and foreach statement, you shouldn't have to write line by line. For split, split by \n.

**vwphillips** · 11-19-2010, 02:33 PM

the text file

Code:

red green blue pink

example

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>

<select id="tst" ></select>

<script type="text/javascript">
/*<![CDATA[*/

function Populate(id,txt){
 this.obj=document.getElementById(id);
 this.ajax(txt);
}

Populate.prototype={

 populate:function(txt){
  txt=txt.split(' ');
  for (var z0=0;z0<txt.length;z0++){
   if (txt[z0]){
    this.obj[this.obj.options.length]=new Option(txt[z0],txt[z0]);
   }
  }

 },

 ajax:function(url){
  var txt=false,oop=this;
  if (window.ActiveXObject){
   try {
    txt=new ActiveXObject("Msxml2.XMLHTTP");
   }
   catch (e){
    try {
     txt=new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e){
    }
   }
  }
  else if (window.XMLHttpRequest){
   txt=new XMLHttpRequest();
  }
  else {
   return false;
  }
  txt.onreadystatechange=function(){
   if (txt.readyState==4&&(txt.status==200||window.location.href.indexOf("http")==-1)){
    oop.populate(txt.responseText);
   }
  }
  txt.open('GET',url+'?'+new Date().getTime(),true);
  try {
   txt.send(null);
  }
  catch (e){
  }
 }

}

new Populate('tst','colors.txt');
/*]]>*/
</script>

</body>

</html>

**LupNo** · 11-19-2010, 02:53 PM

Thanks, and that sounds logical. Do you know of any examples? I haven't found any that don't deal with XML files or jQuery, and most of those are chained selects. I'm looking for something a lot more vanilla.

**Nile** · 11-19-2010, 09:25 PM

Does Vic's code satisfy your needs? If not, I'll try to make a Perl working code.

**LupNo** · 11-20-2010, 03:14 PM

Originally Posted by vwphillips

the text file

Code:

red green blue pink

example

Code:

 populate:function(txt){
  //txt=txt.split(' ');
  txt=txt.split('\n');
  for (var z0=0;z0<txt.length;z0++){
   if (txt[z0]){
    this.obj[this.obj.options.length]=new Option(txt[z0],txt[z0]);
   }
  }

 },

I split the text string as ('\n') instead of (' ') because the .txt files are written line-by-line as so.

red
green
blue
royal blue
black

Is there are reason this isn't a document ready function and is written beneath everything else? I'm just curious (and not too bright). If I wanted to pull two separate .txt files for two different select boxes, each with their own select ID, somehow I need to make this a reusable function.