欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JS实现的简单下拉框联动功能示例

程序员文章站 2022-03-14 14:24:50
本文实例讲述了js实现的简单下拉框联动功能。分享给大家供大家参考，具体如下：

本文实例讲述了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运行工具http://tools.jb51.net/code/htmljsrun，简单效果图如下：

JS实现的简单下拉框联动功能示例

使用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程序设计有所帮助。

上一篇： mysql5.6.35源码安装记录

下一篇： [转]神出鬼没的一杯水--魔术自学

推荐阅读