title: How to populate HTML select list using javascript
body: <p>I'm pretty new to HTML and javascript. I know this code already exist on internet but I can't have it working for me. I'm stuck on this issue for 2-3 days. I would be really glad if you could help me out.</p>
  
  <p>Here is my problem
  I want to populate the <code>optCategory</code> select list based on the selected entry of <code>optPostAppliedFor</code>. For that I called a function change_categoriees(key) when I click the <code>optPostAppliedFor</code> list. The code is here as follows</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td width="40%" align="right" nowrap&gt;
          &lt;strong&gt;
              Post Applied for&lt;span class="text11red"&gt;*&lt;/span&gt; : 
          &lt;/strong&gt;
      &lt;/td&gt;
      &lt;td width="60%"&gt;
          &lt;select name="optPostAppliedFor" class="flat" onclick="change_categories(0);" /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;
              &lt;option value=""&gt;--Select--&lt;/option&gt;
              &lt;?php
              foreach($App['post_applied_for'] as $key =&gt; $val){
                  echo '&lt;option value="'.($key).'"&gt;'.$val.'&lt;/option&gt;';
              }
              ?&gt;
          &lt;/select&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Here is php code for default enteries of <code>optPostAppliedFor</code> and <code>optCategory</code></p>
  
  <pre><code>$App['post_applied_for'] = array(
      'Lecturer'         =&gt; 'Lecturer',
      'Business Analyst' =&gt; 'Business Analyst',
      'Deepender good'   =&gt; 'Deepender good'
  );
  $App['category'] = array(
      'Category1' =&gt; 'Category1',
      'Category2' =&gt; 'Category2',
      'Category3' =&gt; 'Category3'
  );
  </code></pre>
  
  <p>Please tell me how can I make this function, so that my purpose is achieved. I tried this but all in vain.</p>
  
  <pre><code>function change_categoriees(key) {
      alert('asdasd');
  
      var z = document.getElementById('optCategory');
      var x = document.getElementById('optPostAppliedFor');
      var y = document.createElement('option');
  
      var display = x.options[x.selectedIndex].text;
      var option = x.options[x.selectedIndex].value;
  
      y.text = display;
      y.value = option;
  
      try {
          z.add(y,null);
      } catch(ex) {
          z.add(y);
      }
  
      z.options[0].text = '* '+(z.length-1)+' selected *';
  }
  </code></pre>