WN - onclick på selectlist

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - onclick på selectlist (https://www.wn.se/forum/showthread.php?t=32127)

Tjena,
Håller på med ett formulär och har stött på ett problem.

Här är koden, förklaring kommer nedan.

Kod:

function strpos( haystack, needle, offset){

  var i = haystack.indexOf( needle, offset ); // returns -1

  return i >= 0 ? i : false;

}



function addGroupToUser(name){

 if(strpos(document.getElementById("user").innerHTML, name, 0) === false){

document.getElementById("user").innerHTML = document.getElementById("user").innerHTML + name + ', ';

        } else {

 delGroupToUser(name);

        }

}



<select name="selectGroup" id="selectGroup">

        <option value="Kalle" onclick="addUser('Kalle')">Kalle</option>

        <option value="Ola" onclick="addUser('Ola')">Ola</option>

        <option value="Sara" onclick="addUser('Sara')">Sara</option>

</select>

Vad som sker är att man klickar på ett namn i droplistan och namnet läggs in i en lista. Detta fungerar perfekt i Firefox.. men ej i Explorer. Varför?
Jag har kommit så långt att jag förstår att det hela rör sig om att onclick inte fungerar på samma vis i de olika webbläsarna. Verkan inte som explorer registrerar att man valt något.

Hur löser jag detta? Tack!

http://bytes.com/forum/thread589737.html

Använd onchange istället eftersom det inte finns något onclick event i IE.

Ex:
<select name="selectGroup" onchange="addGroupToUser(this.value);" id="selectGroup">
<option value="Kalle">Kalle</option>
<option value="Ola">Ola</option>
<option value="Sara">Sara</option>
</select>

Citat:

Originally posted by Syke@Sep 24 2008, 12:44
http://bytes.com/forum/thread589737.html
Använd onchange istället eftersom det inte finns något onclick event i IE.
Ex:
<select name="selectGroup" onchange="addGroupToUser(this.value);" id="selectGroup">
<option value="Kalle">Kalle</option>
<option value="Ola">Ola</option>
<option value="Sara">Sara</option>
</select>

Korrigering:

<select name="selectGroup" onchange="addGroupToUser(this.options[this.selectedIndex].value);" id="selectGroup">

Citat:

Ursprungligen postat av Syke

http://bytes.com/forum/thread589737.html
Använd onchange istället eftersom det inte finns något onclick event i IE.
Ex:
select name=selectGroup onchange=addGroupToUser(this.value); id=selectGroup
option value=KalleKalle/option
option value=OlaOla/option
option value=SaraSara/option
/select

Citat:

Originally posted by -hnn@Sep 24 2008, 13:08

Citat:

Ursprungligen postat av Syke

http://bytes.com/forum/thread589737.html
Använd onchange istället eftersom det inte finns något onclick event i IE.
Ex:
select name=selectGroup onchange=addGroupToUser(this.value); id=selectGroup
option value=KalleKalle/option
option value=OlaOla/option
option value=SaraSara/option
/select

Korrigering:
select name=selectGroup onchange=addGroupToUser(this.options[this.selectedIndex].value); id=selectGroup

Tack båda ni!

Båda era lösningar fungerar dock, kan ni utveckla varför och vad olikheterna är?
Alltså både this.options[this.selectedIndex].value och this.value fungerar i både Firefox och Explorer 6+.

Har ni några bra länk tips där jag kan utforska område själv, känner mig lite rostig på just denna biten. Ha det!

Hej,
här finns definitionen enligt w3c:
http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-94282980

Där det står bl.a:
"value of type DOMString
The current form control value (i.e. the value of the currently selected option), if multiple options are selected this is the value of the first selected option."

Därför fungerar this.value för select-elementet. Det innehåller helt enkelt det nuvarande valda värdet i select:en.

Det hnn skriver är ett annat sätt att komma åt samma värde:
this.options innehåller en lista med alla options, och this.selectedIndex innehåller numret på den option som är vald. Således blir this.options[this.selectedIndex].value värdet på den valda option:en.

Båda är lika ok enligt w3c, frågan är om den ena är mer implementerad än den andra, det är sånt man får testa i olika webbläsare helt enkelt.

ps. Ett av de bättre sätten att fördjupa sig är helt klart Firefox + Firebug, w3c-specifikationen eller annan referens och sen bara testa, testa och testa. :)