我要评论本文实例讲述了js实现的简单下拉框联动功能。分享给大家供大家参考，具体如下：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>www.jb51.net js下拉联动</title>
<script>
function setsecond(obj){
var val = obj.value;
if(val == 'en'){
var sec = document.getelementbyid('second');
sec.innerhtml = "<option>one</option><option>two</option>";
}else{
var sec = document.getelementbyid('second');
sec.innerhtml = "<option>一</option><option>二</option>";
}
}
</script>
</head>
<body>
<div>
<select id="first" onchange="setsecond(this)">
<option value="en">en</option>
<option value="zh">zh</option>
</select>
</div>
<div>
<select id="second">
</select>
</div>
</body>
</html>
使用在线html/js/css运行工具，简单效果图如下：
使用innerhtml，ie浏览器不支持这种方法的，所以改进方法：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>www.jb51.net js下拉联动</title>
<script>
function setsecond(obj){
var val = obj.value;
if(val == 'en'){
var sec = document.getelementbyid('second');
sec.options[0] = new option("one","one");
sec.options[1] = new option("two","two");
}else{
var sec = document.getelementbyid('second');
sec.options[0] = new option("一","one");
sec.options[1] = new option("二","two");//可设置循环配置，也可一个一个配置
}
}
</script>
</head>
<body>
<div>
<select id="first" onchange="setsecond(this)">
<option value="en">en</option>
<option value="zh">zh</option>
</select>
</div>
<div>
<select id="second">
</select>
</div>
</body>
</html>
可以兼容火狐，ie等
更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript操作dom技巧总结》、《javascript数组操作技巧总结》、《javascript排序算法总结》、《javascript遍历算法与技巧总结》、《javascript数学运算用法总结》、《javascript数据结构与算法技巧总结》、《javascript查找算法技巧总结》及《javascript错误与调试技巧总结》
希望本文所述对大家javascript程序设计有所帮助。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论