populating a select box with javascript
<p>I currently have an auto populating select box depending on what option you select in the first select box. This is all working fine and does the job.</p>

<p>What i am trying to achieve is when the form is submitted it retains the values selected. I can get this working for the first initial select box, but when it comes to the second select box (the one loaded automatically) i cant seem to get it working.</p>

<p>The first select box id is ctlJob with the static information, and the second one has an id of ctlPerson.</p>

<p>Here is my HTML:</p>

<pre><code>    &lt;form id="homesearch" action="view.php" method="get"&gt;
  &lt;label for="ctlJob"&gt;&lt;/label&gt;
  &lt;select name="id" id="ctlJob" style="clear:both; float:left;"&gt;

&lt;option value="0"&gt;Please Select...&lt;/option&gt;    


&lt;option &lt;?php if ($_GET['id'] == '1') { ?&gt;selected="true" &lt;?php }; ?&gt;value="1"&gt;Regional General Manager&lt;/option&gt;
&lt;option &lt;?php if ($_GET['id'] == '2') { ?&gt;selected="true" &lt;?php }; ?&gt;value="2"&gt;General Manager&lt;/option&gt;
&lt;option &lt;?php if ($_GET['id'] == '3') { ?&gt;selected="true" &lt;?php }; ?&gt;value="3"&gt;Deputy General Manager&lt;/option&gt;
&lt;option &lt;?php if ($_GET['id'] == '4') { ?&gt;selected="true" &lt;?php }; ?&gt;value="4"&gt;Operations Manager&lt;/option&gt;
&lt;option &lt;?php if ($_GET['id'] == '5') { ?&gt;selected="true" &lt;?php }; ?&gt;value="5"&gt;Shift Manager&lt;/option&gt;
&lt;option &lt;?php if ($_GET['id'] == '6') { ?&gt;selected="true" &lt;?php }; ?&gt;value="6"&gt;First Line Manager&lt;/option&gt;
&lt;option &lt;?php if ($_GET['id'] == '7') { ?&gt;selected="true" &lt;?php }; ?&gt;value="7"&gt;Stock Controller&lt;/option&gt;


  &lt;noscript&gt;
    &lt;input type="submit" name="action" value="Load Individuals" /&gt;
  &lt;/noscript&gt;

  &lt;select name="person_id" id="ctlPerson" style="clear:both; float:left;"&gt;

  &lt;/select&gt;
&lt;input id="submit" type="submit" name="action" value="search" style="margin-top:40px;" /&gt;
&lt;/form&gt;
</code></pre>

<p>Here is my js:</p>

<pre><code>    &lt;script type="text/javascript"&gt;
  document.getElementById('id').value = "&lt;?php echo $_GET['id'];?&gt;";
  document.getElementById('person_id').value = "&lt;?php echo $_GET['person_id'];?&gt;";
&lt;/script&gt;
</code></pre>

<p>Any ideas on how i can get the secondry select box to stay populated with the option selected after the form has been submitted to itself?</p>

<p>Thanks, Dan</p>

<p>Sorry i missed this js out:</p>

<pre><code> &lt;script type="text/javascript" charset="utf-8"&gt;
$(function(){
$("select#ctlJob").change(function(){
    $.getJSON("view.php",{id: $(this).val(), ajax: 'true'}, function(data){
      var $persons = $("#ctlPerson").empty();
      $.each(data, function() {
        $persons.append("&lt;option value=" + this.optionValue + "&gt;" + this.optionDisplay + "&lt;/option&gt;");
      });
    })
  });
})
&lt;/script&gt;
</code></pre>
