How to create an empty Listbox and pass the options without selecting them?

In my form I'm moving categories from one listbox to another like this:

The bottom box is the "input" box that is read on the server side when the form is posted. Here's how I create the listbox:

<%: Html.ListBoxFor(m => m.categories, Model.categories)%>

I'm having tw开发者_开发问答o problems here:

1. In Firefox, when the form is loaded for the first time the bottom box always has a default <option></option>. Is it possible to remove this on server side? IE seem to create an empty box but not FF.

   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.

2. 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.

jQuery to select options on submit:

$("form").submit(function (event) {
    $("#categories").find("option").attr('selected', 'selected');  
});

jQuery to delete option on load:

$("#categories").find("option").remove();

QUESTIONS

1. Can I create an empty listbox that work in all browsers?

2. Do I have to select the options in the bottom box or is there a workaround?

Clarifiation: I'd like to have as much as possible done on server side, preferably with something related to MVC.

1: Instead of removing all options just remove empty ones, this way it wont reset.

$('#mySelect option').each(function () {
    if(!$(this).val())
        $(this).remove();
});

http://jsfiddle.net/yWHLW/5/

1. http://jsfiddle.net/wVWGm/ check browser compatibility for the empty listbox.

2

$("form").submit(function (event) {
    $("#categories").find("option:selected");  
});

Firefox has that peculiarity that requires it to create the blank element in order to actually display the select element. I'm afraid you won't be able to work around that. However, a potential workaround for #2 may eliminate your concerns about #1.

If you build a jQuery click event handler on your add and remove buttons to create and destroy hidden inputs with the same name attribute for every value that's visually moved between boxes, they will arrive as a CSV string in the appropriate member of the Request.Form collection, which can be turned into an array of values by calling:

Request.Form("myHiddenInputName").Split({","c})

Or equivalent C# code. You won't need to select the elements on submit and you won't need to worry about weeding out the empty value Firefox creates on the server side. Of course... this may not be the most appealing workaround in an MVC architecture, but it was my first response so I thought I'd share.

Why don't you create the list box using simple HTML; instead of using a helper

<select style="width: 370px;" class="cmbBox1" id="ServicesList" 
multiple="multiple" name="ServicesList" size="8"></select>