Espacios en blanco en las opciones de un select

[waspeis]

Buenas compañeros,

Necesito agregar una serie de elementos a un select pero no consigo que me respete los espacios en blanco. Pondré un ejemplo:

La aplicación tiene un input type text y al pulsar la tecla intro se introduce el valor escrito en otro input type text. Para simplificar, en este ejemplo la función enter() introducirá el valor "hola espacio espacio espacio espacio espacio espacio espacio espacio espacio que hay".

Código Javascript:

<script>
    function enter()
    {
        if(event.keyCode==13)
        {
            var cad = "hola         que hay";
            var option = document.createElement("option");
            option.text = cad;
            conceptos.add(option);
        }
    }
</script>
 

Código PHP:

echo "<input type=text name=total id=total onkeypress=enter() size=2>";
echo "<select name=conceptos id=conceptos onchange=mostrar() size=10 style='width:350'></select>";
 

El resultado en Google Chrome es "hola que hay" dentro del select, sin respetar los espacios

El resultado en Internet Explorer es "hola espacio espacio espacio espacio espacio espacio espacio espacio espacio que hay" dentro del select, pero no me funciona correctamente. No me funciona porque luego, al pulsar sobre un elemento del select, tengo que mostrar las letras una a una y al mostrar las letras mediante la función alert() me da como resultado undefined.

Esta es la función que muestra las letras:

Código Javascript:

function mostrar()
    {
        alert(conceptos.options[conceptos.selectedIndex].text);
        alert(conceptos.options[conceptos.selectedIndex].text.length);
        for(var i=0;i<10;i++) 
            alert(conceptos.options[conceptos.selectedIndex].text[i]);
    }
 

La primera línea me muestra el texto completo correctamente. La segunda el tamaño del texto. Y cuando empieza el for sólo muestra undefined y además sólo lo muestra 5 veces...