Hvordan opretter man en select box med createElement?

<ole>

IE forstår ikke:

the_select = document.createElement('select');
the_select.setAttribute('name', 'material_name[]');

Den vil i stedet have:

the_select = document.createElement('<select name="material_name[]">');

- hvilket er hamrende invalid kode  :o|

I FF kan koden se sådan ud:

the_select = document.createElement('select');
the_select.setAttribute('name', 'material_name[]');

the_select_option = document.createElement('option');
the_select_option.setAttribute('value','1');
the_select_option.appendChild( document.createTextNode("En eller anden tekst") );

the_select.appendChild(the_select_option);
document.getElementById("materials_div").appendChild(the_select);

- og så må du som sagt oprette selve select-elementet på den før viste måde i IE

/mvh
</bole>

- men du er i øvrigt absolut nødt til at have en IE under Windows, hvis du vil skrive til WWW. Ellers har du ingen anelse om, hvordan dine sider ser ud hos laaaaaangt størstedelen af nettets brugere  ;o)

Tak olebole, kommer du med et svar?

Jeg har IE, men jeg tænkte mere på hvad workaround er på min kode men den har du skrevet.

Er det muligt du på fingrene lige har koden til at finde forskel på IE og andre browsere?

if (explorer) {} else {}

Mange tak for din hurtige hjælp.

Tjaa, i lige netop denne situation ville jeg nok spørge på browsernavn:

var sUa = navigator.userAgent.toLowerCase();
if (sUa.indexOf("msie")>-1 && sUa.indexOf("opera")<0) {
    // Det er en IE
} else {
    // Det er ikke en IE
}

- altså:

var the_select = the_select_option = null,
sUa = navigator.userAgent.toLowerCase();
if (sUa.indexOf("msie")>-1 && sUa.indexOf("opera")<0) {
    the_select = document.createElement('<select name="material_name[]">');
} else {
    the_select = document.createElement('select');
    the_select.setAttribute('name', 'material_name[]');
}
the_select_option = document.createElement('option');
the_select_option.setAttribute('value','1');
the_select_option.appendChild( document.createTextNode("En eller anden tekst") );

the_select.appendChild(the_select_option);
document.getElementById("materials_div").appendChild(the_select);

Indsæt alle options, før du append'er select'en til 'materials_div'.

Hvis du f.eks. skal have sat en onchange handler på select elementet, bør denne dog først sættes _efter_, select elementet er appended til 'materials_div'.

Skal man lave mange form kontrol elementer, vil en wrapper funktion nok være en god idé. Jeg har lige skrevet en (hvis jeg skal sige det selv) ret fiks én af slagsen:

function createNamedElm(sTag, sName) {
    var sUa = navigator.userAgent.toLowerCase();
    createNamedElm = sUa.indexOf("msie")>-1 && sUa.indexOf("opera")<0) ? ie : ff;
    return createNamedElm(sTag, sName);
    function ie(sTag, sName) {
        return document.createElement("<"+sTag+" name='"+sName+"'>");
    }
    function ff(sTag, sName) {
        var o = document.createElement(sTag);
        o.setAttribute("name", sName);
        return o;
    }
}

Det fikse er, at når funktionen afvikles første gang, tjekkes for browsermærke. Er det en IE, skiftes indmaden af funktionen 'createNamedElm' ud med indmaden af funktionen 'ie'.
Ellers skiftes indmaden af funktionen 'createNamedElm' ud med indmaden af funktionen 'ff'.
Så snart det er sket, kalder funktionen sig selv og returnerer resultatet til det oprindelige kald.

Din kode vil så se sådan ud (udover funktionen ovenfor):

var the_select = the_select_option = null;
the_select = createNamedElm("select", "material_name[]");
the_select_option = document.createElement('option');
the_select_option.setAttribute('value','1');
the_select_option.appendChild( document.createTextNode("En eller anden tekst") );

the_select.appendChild(the_select_option);
document.getElementById("materials_div").appendChild(the_select);

Ups! Der var en fejl:
    createNamedElm = sUa.indexOf("msie")>-1 && sUa.indexOf("opera")<0 ? ie : ff;

Det må jeg nok sige olebole, du har virkelig hjulpet mig enormt, mange tak (bukker).

Jeg har et lille spørgsmål eller måske nærmere et ønske.

I FF ser det helt perfekt ud, i IE ser det også ud som det skal, men hver gang jeg trykker på min knap for at tilføje nye select bokse i min div boks der er 225px bred, ligger de sig ved siden af hinanden i IE (og deraf ødelægger designet), hvor i FF er de under hinanden som jeg ønsker.

Er det noget du ved om det er en fejl i IE, eller om man måske skal lave en:
createElement('br'); (som jeg ikke lige synes virker)

Sig endelig til hvis du synes det kræver et nyt spørgsmål eller lignende.

På forhånd mange tak

Af en underlig grund når jeg tilføjer eksempelvis:

the_select_opt = document.createElement('optgroup');
the_select_opt.setAttribute('label','Test');

the_select.appendChild(the_select_opt);

Virker den fint i IE og i FF - men i Opera(i hvert fald mini) ser det ud som om ingen optgroup findes (viser kun options) - har du et ekspert(en)råd der?

Måske noget af den mærkværdighed, jeg stødte ind i i http://www.eksperten.dk/spm/830175 ?-)

roenving: Tak for dit link, men det ser ud til at i operamini kan jeg ikke få optgroup til at komme frem ligemeget om jeg benytter:

<optgroup label="yada"> eller <optgroup>yada</optgroup>

Du har måske en idé? :)

- måske kan denne kaste lidt lys over noget:
    http://www.w3.org/2005/MWI/BPWG/techs/XhtmlBasic11Support

Kik under 'Support of forms' ...(?)

olebole:

Du har ret - ev, det virker overhovedet ikke... what to do what to do...

Hvis det så var muligt at lave optgroup/kategori som en alm. <option> hvor teksten bare var fed og value = 0, så ville den ellers gå :)

Tak for jeres hjælp.

Måske, du kunne:

<style type="text/css">
.optgroup {
    font-weight: bold;
    font-style: italic;
}
</style>

<script type="text/javascript">
function test4group(oSel) {
    var aOpts = oSel.getElementsByTagName("option");
    var nLastInx = oSel.getAttribute("lastInx") || 0;
    if (aOpts[oSel.selectedIndex].className=="optgroup") oSel.selectedIndex = nLastInx;
    oSel.setAttribute("lastInx", oSel.selectedIndex);
}
</script>

<select onchange="test4group(this)">
    <option value="-1">Vælg ...</option>
    <option value="">Testing A</option>
    <option class="optgroup" value="">Testing B</option>
    <option value="">Testing C</option>
    <option value="">Testing D</option>
    <option value="">Testing E</option>
</select>

Det virker i FF ... men hvad gør ikke det?  :o|

Det var en genial måde lige at komme uden om det - og det virker i FF dog ikke i IE og Opera Mini, ev :)

Ellers tak for forslaget

Virker scriptet i Opera Mini? Hvis det gør, kunne du måske sætte en baggrunds- og forgrundsfarve på din 'optgroup' option i stedet. Det virker i hvertfald i IE  =)

(05/06-2008 22:25:16 - dog ikke i IE og Opera Mini, ev :))

mclemens >> vi kan ikke se, om det er font stylingen eller scriptet, der ikke virker i Opera Mini. I IE virker scriptet, men ikke font stylingen. Styling af bag- og forgrundsfarve virker dog i IE. Derfor spørger jeg  ;o)

Nåja, jeg beklager Ole :)

- no sweat  ;o)

Ja ellers tak for forslaget - jeg prøver med det jeg har nu, og ser hvor det bringer mig, ellers vender jeg sikkert frygteligt tilbage :)