Autofill an HTML select list

Question

Scenario: I have 5 select boxes that hold the 5 weekdays and Instead of having the user click and choose a value for each one I want them to have the option of choosing the first box and have a button next to it that when clicked it auto fills the rest of the select boxes with the same value.

Is it as simple as setting the value of the select boxes equal the the value from the first box? Not sure how to tackle this. Would I also have different IDs and same names for the 5 select boxes or keep them different and apply the value to each option?

Answer 1

Give all the select boxes a class, eg <select class="syncday"> and then have your button's clickhandler do something like

  $$("select.syncday").set("value", $$("select.selectday")[0].get("value"))

this takes the 'value' from the first select and applies it to all of them (using mootools' $$)