Estoy trabajando en un proyecto que tiene un div con 32 niños. Necesito crear un menú desplegable que cambie el fondo de cada div y el padre. Para las otras partes del proyecto que no tienen hijos, he estado usando el siguiente código:

function changediv(color) {
document.getElementById('div1').style.background = color;
}

HTML:

<select>
<option onClick="changediv('#555');">Hex</option>
<option onClick="changediv('blue');">Colorname</option>
<option onClick="changediv('url(example.com/example.png)');">Image</option>
</select>

Podría agregar una ID diferente a cada elemento secundario (id1, id2, id3, ...), pero hay 32 elementos secundarios y no solo tendría que agregar 32 ID, sino también 32 líneas de Javascript. Tiene que haber una mejor manera; de alguna manera seleccionando niños o incluso cambiando el código CSS real que selecciona a los niños.

Gracias, Ian