title: JavaScript - Dynamically creating Select Option values
body: <p>Trying to create a form where a user can enter a variable number of expenses. There are four fields, an expense description, the state the expense took place in, an expense type and a cost. The user clicks an "Add New Expense" button to add another section of these fields to the page. I've got three of the four fields working - Description (input type text), Type (radio buttons) and cost (text). But the state is a dropdown, that pulls the states from a database. The db connection is fine, and PHP creates a string of  tags with relevent values.</p>
  
  <p>Below is the JavaScript, and I should note that it works just fine on Firefox, but not IE, which just seems to create a blank select field with nothing in its dropdown. </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var instance = 1;
  
  function newExpense(element) {
      instance++;
  
      var state = document.createElement("SELECT");
      var stateLabel = document.createElement("LABEL");
  
      state.id = "expensestate" + instance;
      state.name = "expnsestate" + instance;
      state.innerHTML = "&lt;?php echo $stateDropDown ?&gt;";
  
      stateLabel.setAttribute("for", state.id);
      stateLabel.innerHTML = "State: ";
  
      document.getElementById("expenses").appendChild(stateLabel);
      document.getElementById("expenses").appendChild(state);
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Like I said, this seems to work perfectly in Firefox. It generates valid HTML and the dropdown works as expected. But in IE it creates the select form field, but with an empty dropdown. Any clues to what I may be missing would be most appreciated!</p>
  
  <p>Edit - Paired down the code to the essentials. Thanks for the tip! :)</p>