[IE/JS/DOM] hasAttribute('selected') op een <option> in IE

maandag 17 januari 2011 16:27

Acties:

0 Henk 'm!

Eersteklas beunhaas

Topicstarter

Ik probeer in IE te achterhalen of een select tag een option heeft met een selected tag. Dit blijkt echter niet te werken.

HTML:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
    <head>
        <title>IE test</title>
        <script type="text/javascript">
            function testselect()
            {
                if (document.getElementById('selecttest').options[0].hasAttribute('selected'))
                    alert("True");
                else
                    alert("False");
            }
        </script>
    </head>
    <body>
        <div>
            <select id="selecttest">
                <option value="lala" selected="selected">Lalala</option>
            </select>

            <a onclick="testselect(); return false;">Test</a>
        </div>
    </body>
</html>

Ik ben me ervan bewust dat hasAttribute pas werkt vanaf IE8. Daarin treedt dit probleem op. Ik krijg altijd als alert 'False' te zien, terwijl het attribuut gewoon bestaat. Andere attributen, zoals value, werken wel.

Ik kan ook geen getAttribute gebruiken omdat IE dat ziet alsof je gewoon option.selected aanroept, en dat geeft dus de huidige waarde weer, niet de waarde van het attribuut zoals in de HTML staat.

Uiteraard werkt dit in elke andere browser perfect. Ziet iemand een mogelijke oplossing die ik niet zie? Ik kom er zelf niet uit.

Ik ontken het bestaan van IE.

dinsdag 18 januari 2011 09:22

Acties:

0 Henk 'm!

R4gnax

Javascript

JavaScript:

if (document.getElementById("selecttest").selectedIndex == 0) 
  alert("true");
else
  alert("false");

jQuery handelt option tags intern speciaal af voor IE, dus daar zou je wel gewoon moeten kunnen doen:

JavaScript:

if ($("#selecttest option:selected").length)
  alert("true")
else
  alert("false")

dinsdag 18 januari 2011 11:44

Acties:

0 Henk 'm!

cyberstalker

Eersteklas beunhaas

Topicstarter

Bedankt voor je reply, maar dit is niet de oplossing. selectedIndex geeft de huidige waarde weer, niet de waarde zoals die in de html is aangegeven.

Ik wil dus expliciet weten of een option in de html-code een selected attribuut heeft.

Ik ontken het bestaan van IE.

dinsdag 18 januari 2011 15:50

Acties:

0 Henk 'm!

Gratzip

code:

1
2
3

if (document.getElementById('selecttest').options[0].selected)
of
if (document.getElementById('selecttest').options[0].selected.value != 0)

Heb je dat al geprobeerd?

vrijdag 21 januari 2011 08:04

Acties:

0 Henk 'm!

cyberstalker

Eersteklas beunhaas

Topicstarter

Ja. Dat doet niet wat ik wil. Dat geeft namelijk de huidige waarde van de optie mee. Ik wil weten of het *attribuut* gezet is.

Punt is dat de browser automatisch het eerste element selecteert wanneer geen van de opties een selected attribuut heeft en ik wil weten of dit de browser is die kiest, of dat deze optie echt als geselecteerd is gemarkeerd.

Ik ontken het bestaan van IE.

vrijdag 21 januari 2011 09:11

Acties:

0 Henk 'm!

R4gnax

Javascript

cyberstalker schreef op vrijdag 21 januari 2011 @ 08:04:
Punt is dat de browser automatisch het eerste element selecteert wanneer geen van de opties een selected attribuut heeft en ik wil weten of dit de browser is die kiest, of dat deze optie echt als geselecteerd is gemarkeerd.

Wat je hier wilt gaan afhandelen is een gat in de gevestigde HTML specificaties dat pas in HTML5 afgedicht wordt. HTML5 dicht het af door de situatie te verbieden. Het is simpelweg niet toegestaan om een select element dat als vereist is gemarkeerd, te hebben zonder een geselecteerde optie. (Enige uitzondering is als er een optie met een lege waarde present is: die wordt dan automatisch als placeholder waarde geselecteerd.)

Overigens is het vanwege fundamentele implementatiefouten in IE 6/7 in die browsers onmogelijk om met getAttribute het selected tag attribuut op te halen. Je zult altijd de (interactieve) DOM property variant terug krijgen. Wellicht dat je het op kunt lossen mbv de outerHTML optie en dan je option tag met een regex parsen om te zien of er een selected attribuut op zit: smerige hack voor een smerige browser.

vrijdag 21 januari 2011 09:49

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Mag ik vragen waarom je wil weten of het door de browser geset is of niet? Door slimme default waardes en een goede UI, hoeft het in mijn ogen niet van belang te zijn.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

zondag 23 januari 2011 13:10

Acties:

0 Henk 'm!

cyberstalker

Eersteklas beunhaas

Topicstarter

R4gnax schreef op vrijdag 21 januari 2011 @ 09:11:
[...]
Overigens is het vanwege fundamentele implementatiefouten in IE 6/7 in die browsers onmogelijk om met getAttribute het selected tag attribuut op te halen. Je zult altijd de (interactieve) DOM property variant terug krijgen. Wellicht dat je het op kunt lossen mbv de outerHTML optie en dan je option tag met een regex parsen om te zien of er een selected attribuut op zit: smerige hack voor een smerige browser.

Dat is een slim idee waar ik nog niet aan gedacht heb. Dit ga ik zeker proberen.

OkkE schreef op vrijdag 21 januari 2011 @ 09:49:
Mag ik vragen waarom je wil weten of het door de browser geset is of niet? Door slimme default waardes en een goede UI, hoeft het in mijn ogen niet van belang te zijn.

Omdat ik alleen een nieuwe waarde wil opslaan als de gebruiker deze gewijzigd heeft. Wanneer de gebruiker het wijzigd en weer terugzet moet er dus niet worden opgeslagen (en om die reden kan ik dus ook geen event listener gebruiken).

Wanneer er geen selected attribuut bestaat is er nog geen huidige waarde en moet er altijd worden opgeslagen.

Ik ontken het bestaan van IE.

Onderwerpen