select下拉框如何判断禁用另一个下拉框?要实现对select下拉框的值进行判断,并根据值进行禁用,需要借助javascript脚本来实现。下面,小编就以一个实例来为大家进行讲解分析。
方法/步骤
1、创建模拟环境首先,我们来创建一个html网页,用于模拟验证。打开记事本,将以下内容复制粘靠漤霸陆贴进去,并将文件保台仵瑕噤存为test.html<html><body><center><br/><br/><br/><selectid=s1><optionvalue="张三">张三</option><optionvalue="李四">李四</option><optionvalue="王五">王五</option><optionvalue="刘六">刘六</option></select><selectid=s2><optionvalue="北京">北京</option><optionvalue="上海">上海</option><optionvalue="广州">广州</option><optionvalue="深圳">深圳</option></select></body></html>
2、查看模拟效果双击test.html文件打开,在浏览器中可以看到运行效果。为了方便讲解,这里我们将要求明确一些,如果大家有不同的要求,可根据这个自行修改即可:在第一下拉框的值改变后,判断第一下框中值是否为“李四”,如果是“李四",则禁用第二个下拉框,否则第二个下拉框有效可用。
3、加入事件监控要在第一个下拉框值发现变化时进行值判断,我们需要为第一个下拉框加入onchange事件,修改代码如下:<selectid=s1onchange="testVlaue()">其中testVlaue()为javascript函数,我们把它放在<html>和<body>标准之间,如下图所示。
4、完善监控函数前面我们只是定义了监控函数的框架,现在来完善代码,实现下拉框值的判断。如果第一个下拉框中的值是李四,则弹出“是李四”的提示,如果不是李四,则弹出“不是李四”的提示:functiontestVlaue(){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、保存并刷新网页,选中“王五”时,第二个下拉框没变化;选中“李四”时,第二个下拉框变灰被禁用;再选中“张三”时,第二个下拉框又恢复正常状态。完全符合我们的要求,任务完成!