Question

I declare several select items (about 4-5 dozen) by adding the following string to the page

"<select id='myidxxx'><option>" + default + "</option></select>"

And then add other elements later. The problem is, whether I add other elements or not, there is always a blank element selected at start. I can’t get it to not have one, or to select the default value. I’ve tried

<option selected='selected'>

but with no success. How do I get this to list only the explicity added options (no blank line) and select the default entry?

EDIT: I am using IE8

Answer 1

Firstly I recommend that you create your elements in JS

Dynamically creating the select tag and its options is the way I would go about this. I am wonder though are you pulling data from a database or some other location that could be where you are getting the blank from.

Another possible solution it to iterate over the children of the option tag and not add it if it is a null or empty string.

for (i = 0; i < options.length; i++) {
    if (options[i] != "" && options[i] != " ") {
        opt = document.createElement("option");
        opt.innerText = options[i];
        opt.value = i;
        selectTag.appendChild(opt);
    }
}

Here is an example: http://jsfiddle.net/V26P5/2/