Question related to <select> input field

I have three <select> input fields: <select name=first>,<select name=second>and<select 开发者_高级运维name=three>. The 2nd and 3rd fields are disabled. If the user changes the value of the first field, the 2nd field should be enabled and so on. Is there an example related to this task? thanks

This is called cascading select, here are some examples

http://forums.digitalpoint.com/showthread.php?t=703846

http://www.everyweb.ru/wmaster/javas/menu/demo/dynasele.html

http://www.inside-oracle-apex.com/generic-solution-for-cascading-select-listslovs/

http://webdeveloper.earthweb.com/webjs/jsnavigation/item.php/91311

In its easiest way, you can bind an event handler to the elements for the change event and adjust the disabled property:

var form = document.getElementById('formId');

form.first.onchange = function() {
    form.second.disabled = false;
};

form.second.onchange = function() {
    form.three.disabled = false;
};

DEMO

I also suggest to disable the fields via JavaScript, otherwise, if users have JavaScript disabled, they cannot use the form.