Oprette en select-menu med options ved brug af appendChild

// laver select box
var selectBox = document.createElement('select');
// array med options objekter
var myOptions = [
    new Option(1,'foo'),
    new Option(2,'bar'),
    new Option(3,'bas')
];
// tilføjer dine options
for(i=0;i<myOptions.length;i++) {
    selectBox.options[selectBox.options.length] = myOptions[i];
}
selectBox.selectedIndex = 0; // sætter selected til første element

<select> http://krook.org/jsdom/HTMLSelectElement.html
<option> http://krook.org/jsdom/HTMLOptionElement.html

og en anden måde at gøre det på

    // Formatting selector
    var styleSelect = upperToolbar.appendChild(document.createElement('select'));
        styleSelect.className = 'style';
        styleSelect.onchange  = function() {
            rte.formatText('formatblock',styleSelect);
        }
    var idx = styleSelect.options.length;
        styleSelect.options[idx++] = new Option('[Style]','');
        styleSelect.options[idx++] = new Option('Paragraph <p>','p');
        styleSelect.options[idx++] = new Option('Heading 1 <h1>','h1');
        styleSelect.options[idx++] = new Option('Heading 2 <h2>','h2');
        styleSelect.options[idx++] = new Option('Heading 3 <h3>','h3');
        styleSelect.options[idx++] = new Option('Heading 4 <h4>','h4');
        styleSelect.options[idx++] = new Option('Heading 5 <h5>','h5');
        styleSelect.options[idx++] = new Option('Heading 6 <h6>','h6');
        styleSelect.options[idx++] = new Option('Address <address>','address');
        styleSelect.options[idx++] = new Option('Formatted <pre>','pre');

ups, ignorer mit onchange event i overstående :-)

Jeg skal faktisk bruge en onchange! ;)
Men jeg må afprøve det i morgen. Du kan bare oprette et svar nu, hvis du vil, så ser jeg på det! :)

<ole>

Hvis det skal være i dette årtusindes kode, bør man bruge createElement og ikke new Option.

På den anden side, er ingen af de to store browseres editor noget, der hører til i dette årtusinde. I en online-editor kan man såmænd skrive, hvad somhelst uden koden bliver dårligere  =)

/mvh
</bole>

"Hvis det skal være i dette årtusindes kode, bør man bruge createElement og ikke new Option."
Ja, men det rendere ikke korrekt OleBole.

Ved at bruge new Option expander ens select korrekt i størrelse afhæning af dine options indhold.

Okay ... jeg er ikke stødt ind i problemet. Hvilke browsere har du haft problemer i?

Jeg har benyttet windcapes løsning, som virker fint. Hvis du lige opretter et svar! :)

Hvilke renderings problemer skulle der være med DOM - og i hvilke browsere?

Olebole >> Du siger, at der ikke er mange, der laver Ajax ordentligt. Og med det mener du blandt andet behandlingen af output fra det kaldte dokument.

Men er der også stor sandsynlighed for dårligt Ajax, når man blot kører en ASP-/PHP-side uden at få denne sides output igen? Dvs. eventuelt en side, som opdaterer en database, men ikke returnerer noget.

Naturligvis skal en sådan side ikke kaldes hvert 100. ms, men alligevel..

Ja, det er der i teorien. Problemerne opstår først og fremmest omkring DOM-koden - og ved evt OOP'ing i JavaScript ... og primært i IE. De samme problemer kan opstå (og gør det) ved alm. webkodning, hvor sider konstant skifter - men med AJAX tydeliggøres de ved, at der ikke skiftes side og beslaglagt hukommelse derfor ikke frigives.
Ovenikøbet er der en hel del situationer, hvor beslaglagt hukommelse ikke engang frigives ved sideskift - men hvor browseren skal lukkes helt ned for at frigive hukommelse. I GoogleMaps API'et ligger således en metode, der skal kaldes på onunload for at frigive hukommelse og løser dette problem ... men det er desværre noget af et særsyn.

Bare en ting som, hvornår man append'er eventlisteners, har betydning. Sættes en eventlistener på et element, der endnu ikke er indsat i dokumentets DOM, opretter IE et lokalt script-scope omkring det 'fritsvævende' element.
Når elementet indsættes i dokumentet og det derfor indgår i dokumentets almene scope, destrueres det lokale scope ikke - og udgør derfor en memory-leak.
Morale: Sæt _altid_ eventlisteners, _efter_ et element er indsat i dokumentet!

Der er som sagt flere ting, der bør tages hensyn til og jeg agter at komme med en håndfuld artikler om emnet. Det begyndte med én, men greb om sig, da emnet _er_ meget omfattende. De er nok færdige hen på eftersommeren  =)

PS: Brug _aldrig_ GET, når du bruger AJAX! Der sker noget caching på grund af de 'unikke' URL'er, hvilket kan blive ret katastrofalt ved f.eks. en chat-app, hvor kaldene er rigtig mange - og fortsætter i lange perioder.

Morale: Brug _altid_ POST ved AJAX  ;o)

Takker! Glæder mig til artiklerne! :)

Windcape, opretter du lige et svar? :)

Ja, ellers så lukker jeg da bare :) Men du får lige lidt tid til at gi' et svar..