Alle selectboxen binnen een div veranderen

[Twilight]

Ik wil alle select boxen binnen een div kunnen aanpassen naar dezelfde waarde.
Voorbeeld:

<div id=1>
<select id=1 onchange=functie()></select>
<select id=2 onchange=functie()></select>
<select id=3 onchange=functie()></select>
</div>

<div id=2>
<select id=1 onchange=functie()></select>
<select id=2 onchange=functie()></select>
<select id=3 onchange=functie()></select>
</div>

m.a.w. Als selectbox1 van div1 veranderd naar 22:00uur, moeten de andere selectboxen binnen div1 ook op 22:00uur springen. Ik zit op dit moment te klooien met:

aantal_selects = document.getElementsByTagName('select').length;

Alleen dan krijg ik alle selectboxen terug maar niet alleen die binnen div1 zitten.

[NMe]

Ik neem aan dat de werkelijke id's van je divs en selectboxes anders heten? Pure numerieke identifiers lijkt me niet zo handig.

Inhoudelijk: kun je niet document.getElementById('id van div').getElementsByTagName('select') gebruiken?

[Verwijderd]

[pure miereneuk modus]
Mag je uberhaupt wel een ID beginnen met een getal? Of alleen een getal als ID? Ik dacht dat ik daar weleens een validation error op heb gekregen
[/pure miereneuk modus]

En ja, ik zou doen wat -NMe- zegt. Misschien eerst je div ophalen, kijken offie niet null is, daarna de selects ophalen... Maar da's je eigen implementatie keus.

[418O2]

even tussendoor

maar als je 2 selectboxen hebt die dezelfde waarde krijgen als de ander, waarom heb je er dan 2?

[Zamalan]

Dat zou zoiets moeten zijn, zonder mogelijkse syntax fouten e.d.

JavaScript:

function functie()
{
  // de div waarmee we werken
  var div = this.parentNode;
  // de geselecteerde optie van de select waarvan de event triggered
  var value =  this.options[this.selectedIndex].value;
  // array van de selects in de div
  var selects = div.getElementsByTagName("select");
  // voor elke select in de div
  for(var i = 0; i < selects.length; i++)
  {
    // zet value (ik weet niet hoe dat moet van buiten)
  }
}

[ Voor 6% gewijzigd door Zamalan op 18-10-2007 09:14 ]

[Cartman!]

Ik zou het jezelf makkelijk maken en gebruik maken van bijv. MooTools Dan kun je gewoon het volgende doen:

code:

var elements = $$('div#je_id select');

en heb je alle select elementen binnen de div 'je_id'

[gvanh]

Ik denk dat de oplossing van Zamalan de mooiste is.
Daarmee heb je helemaal geen IDs of 'harde' verwijzingen nodig. Dat maakt je script veel flexibeler bij eventuele toekomstige wijzigingen.

[ Voor 57% gewijzigd door gvanh op 19-10-2007 13:09 ]

[Crayne]

Ik betwijfel of Zamalan's oplossing zal werken. Hij gebruikt 'this' in de verkeerde scope en de parentnode van de select die veranderd wordt hoeft echt niet altijd de bovenliggende div te zijn.

Met het volgende script en een div die als id 'divToChange' mee krijgt, komt TS een stuk verder, áls al zijn selects dezelfde waardes hebben. Zo niet, dan zal bij elke select eerst de juiste option worden gevonden wiens waarde overeenkomt met die van de gekozen option index in de originele select.

JavaScript:

function changeSelects(oSelect) 
{ 

  var aSelects = document.getElementById('divToChange').getElementsByTagName('select'); 

  for(var x = 0; x < aSelects.length; x++) 
  { 
 
        aSelects[x].selectedIndex = oSelect.selectedIndex;

  } 

}

Aan te roepen met

HTML:

<select name="select1" onChange="changeSelects(this);">

[ Voor 8% gewijzigd door Crayne op 19-10-2007 15:06 ]

[zwippie]

@TS: In je voorbeeld hebben er meerdere (ook nog eens zelfde type) elementen in de pagina dezelfde id. Dat is sowieso niet goed, net als alleen een nummertje als id, ook niet handig.


Zelf grijp ik meestal naar jQuery bij dit soort dingen, maar voor zo'n klein dingetje is dat misschien een beetje overkill. Het scheelt soms wel wat cross-browser gezeur.