title: Populating a drop down box using javascript from server side files
body: <p>I have a small site that has a dropdown box which I hope I can populate from a folder on a hosted server, each item in the dropdown box should represent the file name of each file in the folder.</p>
  
  <p>This is then linked to a button which will call a function load selected data into a script to visualize.</p>
  
  <p>I am currently unsure about loading the file list into the application.</p>
  
  <p>so far I have:</p>
  
  <p>drop down list (note: using jade):</p>
  
  <pre><code>select#dataSetChoice
  </code></pre>
  
  <p>the function to run a script based on the contents of the drop down box:</p>
  
  <pre><code>    function loadDataSet(){
        var dataSet = dataSetChoice.options[dataSetChoice.selectedIndex].text;
        initialize(dataSet);
      }
  </code></pre>
  
  <p>the button event:</p>
  
  <pre><code>  button(onclick='loadDataSet()') Load data 
  </code></pre>
  
  <p>all I need to do down is populate the drop box list based on the contents of this folder:</p>
  
  <pre><code>http://localhost/data/
  </code></pre>
  
  <p>Edit: html directory listing as requested</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Index of /pje40&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;h1&gt;Index of /pje40&lt;/h1&gt;
  
      &lt;table&gt;
          &lt;tr&gt;
              &lt;th valign="top"&gt;
                  &lt;img src="/icons/blank.gif" alt="[ICO]"&gt;
              &lt;/th&gt;
              &lt;th&gt;
                  &lt;a href="?C=N;O=D"&gt;Name&lt;/a&gt;
              &lt;/th&gt;
              &lt;th&gt;
                  &lt;a href="?C=M;O=A"&gt;Last modified&lt;/a&gt;
              &lt;/th&gt;
              &lt;th&gt;
                  &lt;a href="?C=S;O=A"&gt;Size&lt;/a&gt;
              &lt;/th&gt;
              &lt;th&gt;
                  &lt;a href="?C=D;O=A"&gt;Description&lt;/a&gt;
              &lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th colspan="5"&gt;&lt;hr&gt;&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td valign="top"&gt;
                  &lt;img src="/icons/back.gif" alt="[PARENTDIR]"&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;a href="/"&gt;Parent Directory&lt;/a&gt;
              &lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td align="right"&gt;  - &lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td valign="top"&gt;
                  &lt;img src="/icons/unknown.gif" alt="[   ]"&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;a href="week1"&gt;week1&lt;/a&gt;
              &lt;/td&gt;
              &lt;td align="right"&gt;
                  2013-12-06 19:28
              &lt;/td&gt;
              &lt;td align="right"&gt;119K&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td valign="top"&gt;
                  &lt;img src="/icons/unknown.gif" alt="[   ]"&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;a href="week2"&gt;week2&lt;/a&gt;
              &lt;/td&gt;
              &lt;td align="right"&gt;
                  2013-12-06 19:28
              &lt;/td&gt;
              &lt;td align="right"&gt;119K&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td valign="top"&gt;
                  &lt;img src="/icons/unknown.gif" alt="[   ]"&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;a href="week3"&gt;week3&lt;/a&gt;
              &lt;/td&gt;
              &lt;td align="right"&gt;
                  2013-12-06 19:28
              &lt;/td&gt;
              &lt;td align="right"&gt;119K&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;th colspan="5"&gt;&lt;hr&gt;&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  
      &lt;address&gt;Apache/2.4.7 (Win32) OpenSSL/1.0.1e PHP/5.5.6 Server at localhost Port 80&lt;/address&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Should the jquery look similar to this:</p>
  
  <p>script(src='<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" rel="nofollow">http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js</a>')</p>
  
  <pre><code>var returned_html = $.trim($('http://localhost/pje40/').html());
  
  var trs = $(returned_html).find('tr');
  trs.splice(0, 2);
  trs.splice(trs.length - 1, 1);
  
  var directory_list = [];
  for(var i = 0; i &lt; trs.length; i++)
  {
      var tds = $(trs[i]).find('td');
      directory_list.push({
          "icon": $(tds[0]).find('img').attr('src'),
          "name": $(tds[1]).find('a').html(),
          "href": $(tds[1]).find('a').attr('href'),
          "last_modified": $(tds[2]).html(),
          "size": $(tds[3]).html(),
          "description": $(tds[4]).html()
      });
  }
  
  alert(directory_list.length);
  </code></pre>