1、创建模拟环境首先，我们来创建一个html网页，用于模拟验证。打开记事本，将以下内容复制粘靠漤霸陆贴进去，并将文件保台仵瑕噤存为test.html<html> <body> <center> <br/><br/><br/> <select id=s1> <option value="张三">张三</option> <option value="李四">李四</option> <option value="王五">王五</option> <option value="刘六">刘六</option> </select> <select id=s2> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广州">广州</option> <option value="深圳">深圳</option> </select> </body></html>
2、查看模拟效果双击test.html文件打开，在浏览器中可以看到运行效果。为了方便讲解，这里我们将要求明确一些，如果大家有不同的要求，可根据这个自行修改即可：在第一下拉框的值改变后，判断第一下框中值是否为“李四”，如果是“李四"，则禁用第二个下拉框，否则第二个下拉框有效可用。
3、加入事件监控要在第一个下拉框值发现变化时进行值判断，我们需要为第一个下拉框加入onchange事件，修改代码如下：<select id=s1 onchange="testVlaue()">其中testVlaue()为javascript函数，我们把它放在<html>和<body>标准之间，如下图所示。
4、完善监控函数前面我们只是定义了监控函数的框架，现在来完善代码，实现下拉框值的判断。如果第一个下拉框中的值是李四，则弹出“是李四”的提示，如果不是李四，则弹出“不是李四”的提示： function testVlaue() { if (document.getElementById("s1").value=="李四") { alert("是李四"); } else { alert("不是李四"); } }保存后，经测试效果正确。
5、现在已经能够根据第一个下拉框的值来进行真假判断了，下一步完善中，我们只须在条件为"真"时，让第二个下拉框禁用；条件为“假”时，让第二个下拉框恢复正常态度即可。所以我们只须对第二个下拉框的disabled属性进行修改即可 if (document.getElementById("s1").value=="李四") { document.getElementById("s2").disabled=true; } else { document.getElementById("s2").disabled=false; }disabled属性为“true”(真）则禁用，为“false”(假）则正常。
6、保存并刷新网页，选中“王五”时，第二个下拉框没变化；选中“李四”时，第二个下拉框变灰被禁用；再选中“张三”时，第二个下拉框又恢复正常状态。完全符合我们的要求，任务完成！
