Option onchange (inte select onchange..)

Hej!

Jag är ganska så ny på javascript och har stött på ett problem.

Såhär ser min kod ut:

<select onchange="javascript:switchCollection('box','box2')" class="category">
<option value="" selected="selected">Alla kategorier</option></select>

Det mitt javascript gör är att dölja alla divar som börjar på box, och visar diven box2.

Det jag vill göra är följande: Jag vill ha en onchange på varje option rad för varje rad, så att när man ändrar val i selectboxen så visas en annan div.

Men detta går inte att göra. Hur kan jag lösa detta..?

Tacksam för hjälp!

Jag löste det genom att skriva onmouseclick istället för onchange :)

onchange och alla DHTML events är ren javascript kod, så javascript: delen fungera inte. onmouseclick är om jag inte är helt ute och cyckla inte något som fungera på alla webbläsare heller, onchange är det korrekta eventet kan jag tycka för rätt många använder inte musen för att markera input fält utan navigera sig med tangentbordet

Tack för ditt svar voigtan, det löste sig. Som sagt så är jag inte bra på javascript, utan försöker att modifiera färdiga scripts för att förstå dem bättre och utifrån det lära mig någonting.

Ett problem jag kämpat med i flera timmar är följande:

Min kod:

<script type="text/javascript" language="javascript">
        function switchCollection(elColl,elShow) {
            var subLength = elColl.length;
            var divCollection = document.getElementsByTagName('div');
            var divSelected = document.getElementById(elShow);           
            for (var i=0; i<divCollection.length; i++) {
            if(divCollection[i].id.substring(0,subLength) == elColl) { divCollection[i].style.display = "none"; }
            }           
            divSelected.style.display = "block";
        }
</script>

Och för att kalla funktionen använder jag följande:

<option onmouseclick="javascript:switchCollection('box','box1')">

<option onmouseclick="javascript:switchCollection('box','box2')">

<option onmouseclick="javascript:switchCollection('box','box3')">

Sedan har jag även några divar som ser ut på följande vis:

<div id="box1" style="display:block;">
box1
</div>
<div id="box2" style="display:none;">
box2
</div>

<div id="box3" style="display:none;">
box3
</div>

Detta fungerar bra. Men jag vill experimentera lite men jag kommer absolut ingenvart:

Jag vill att när jag väljer ett alternativ i selectboxen, tex: <option onmouseclick="javascript:switchCollection('box','box1')">

Så skall ALLA divar med id="box1" visas.

<div id="box1" style="display:block;">
box1
</div>

<div id="box1" style="display:block;">
box1
</div>

<div id="box1" style="display:block;">
box1
</div>

<div id="box1" style="display:block;">
box1
</div>

etc...

Men jag vet att detta inte är möjligt eftersom id är unikt. Jag har googlat i all evighet och försökt hitta motsvarigheter fast för classer osv.. Men inte kommit någonvart.

Hur skall jag gå tillväga?

"javascript:switchCollection('box','box1')" innebär att alla divar som börjar på box skall döljas, medan box1 skall visas. I detta fallet vill jag just att alla som börjar på box skall döljas förutom alla divarna som har id/class som heter box1.

Vore otroligt tacksam för hjälp!

1. bind inte eventet på dina options.

2. Var är id 'box' i din kod?

3. Kolla in jquery eller sizzlejs för deras CSS selectorer om du behöver använda klasser. Om inte så få du hämta ut alla DOM objekt (getElementsByTagName("div")) och loopar ut dom och kolla .className på varje.

4. En annan lösning är ju att lägga in alla dina divar i en egen div med id 'box1'