<script type="text/javascript">
onload=function(){
createSelect();
}
function createSelect() {
m = document.getElementsByName("select_master")[0];
c = document.getElementsByName("select_childs");
m.onchange=function(e){
changeSelect( this.options[this.selectedIndex].value , this.getAttribute("data-img") );
}
for (var i = 0; i < c.length; i++ ) {
c[i].onchange=function(){
changeSelect( this.options[this.selectedIndex].value , this.getAttribute("data-img") );
}
setSelectionByValue( c[i] , document.getElementById( c[i].getAttribute("data-img") ).getAttribute("src") );
}
}
function changeSelect( v , p ) {
cars = document.getElementsByName("select_cars");
childs = document.getElementsByName("select_childs");
if( p == "all" ) {
for ( var i = 0; i < cars.length; i++ ) cars[i].setAttribute( "src" , v );
for ( var i = 0; i < childs.length; i++ ) {
setSelectionByValue(childs[i] , v);
}
} else {
if ( document.getElementById(p) ) document.getElementById(p).setAttribute( "src" , v );
}
}
function setSelectionByValue( e , v ) {
for ( var y = 0; y < e.options.length; y++ ) {
if (e.options[y].value == v) e.selectedIndex = y;
}
}
function saveSelection() {
var ret = "";
cars = document.getElementsByName("select_cars");
for ( var i = 0; i < cars.length; i++ ) {
if( i > 0 ) ret += ",";
ret += cars[i].getAttribute("src");
}
alert(ret);
}
</script>
Hurtig vælger
<select name="select_master" data-img="all">
<option value="red.jpg">Rød</option>
<option value="blue.jpg">Blå</option>
<option value="yellow.jpg">Gul</option>
</select>
<br />
<select name="select_childs" data-img="car01">
<option value="red.jpg">Rød</option>
<option value="blue.jpg">Blå</option>
<option value="yellow.jpg">Gul</option>
</select>
<select name="select_childs" data-img="car02">
<option value="red.jpg">Rød</option>
<option value="blue.jpg">Blå</option>
<option value="yellow.jpg">Gul</option>
</select>
<select name="select_childs" data-img="car03">
<option value="red.jpg">Rød</option>
<option value="blue.jpg">Blå</option>
<option value="yellow.jpg">Gul</option>
</select>
<br />
<br />
<img src="red.jpg" name="select_cars" id="car01" />
<img src="blue.jpg" name="select_cars" id="car02" />
<img src="yellow.jpg" name="select_cars" id="car03" />
<button type="submit" onclick="saveSelection();">Gem</button>
