title: How to create an empty Listbox and pass the options without selecting them?
body: <p>In my form I'm moving categories from one listbox to another like this:<br>
  <img src="https://i.stack.imgur.com/gjo29.png" alt="enter image description here">  </p>
  
  <p>The bottom box is the <em>"input"</em> box that is read on the server side when the form is posted. Here's how I create the listbox:  </p>
  
  <pre><code>&lt;%: Html.ListBoxFor(m =&gt; m.categories, Model.categories)%&gt;
  </code></pre>
  
  <p>I'm having two problems here:  </p>
  
  <ol>
  <li><p>In <strong>Firefox</strong>, when the form is loaded for the first time the bottom box always has a default <code>&lt;option&gt;&lt;/option&gt;</code>. Is it possible to remove this on server side? <strong>IE</strong> seem to create an empty box but not FF.<br>
  To solve this I'm removing the empty option on page load. One problem with this is that when a form has an error and isn't submitted, the options are removed again.</p></li>
  <li><p>In order for the options in the bottom box to be posted they have to be selected. To solve this I've used the jQuery below to select the options on form post.</p></li>
  </ol>
  
  <hr>
  
  <p>jQuery to select options on submit:  </p>
  
  <pre><code>$("form").submit(function (event) {
      $("#categories").find("option").attr('selected', 'selected');  
  });
  </code></pre>
  
  <p>jQuery to delete option on load:  </p>
  
  <pre><code>$("#categories").find("option").remove();
  </code></pre>
  
  <p><strong>QUESTIONS</strong><br>
  1. Can I create an empty listbox that work in all browsers?<br>
  2. Do I have to select the options in the bottom box or is there a workaround?  </p>
  
  <p>Clarifiation: I'd like to have as much as possible done on server side, preferably with something related to MVC.</p>