You can forgo the "Go" button and have the menu respond as soon as the last select menu is selected by the user with the following. Using the default HTML code of the demo page:
Code:
<body onload="initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, 'savestate')">
<form name="listmenu0">
<table align="center"><tr>
<td><select name="firstlevel" style="width:180px;"></select></td>
<td><select name="secondlevel" style="width:160px;"></select></td>
<td><select name="thirdlevel" style="width:160px;"></select></td>
<td><input type="button" value="Go" onclick="goListGroup(document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel)">
<input type="button" value="Reset" onclick="resetListGroup('chainedmenu')">
</tr></table>
</form>
You'd add to it (following the above code) the below:
Code:
<script type="text/javascript">
function ddaddEvent(target, functionref, tasktype){
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false);
else if (target.attachEvent)
target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});
}
ddaddEvent(document.listmenu0.thirdlevel, function(){
goListGroup(document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel)
}, "change")
</script>
Make sure the lines in red match the information within the original HTML code above it. With the extra code, the 3rd select menu reacts as soon as a choice has been selected within it, without having to click on the "go" button.
Bookmarks