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

作者: 计算机网络技术  发布:2019-09-06

本文实例陈诉了js实现下拉框选取要体现图片的艺术。分享给大家供大家仿效。具体贯彻格局如下:

正文实例陈述了JS达成的差相当少下拉框联合浮动成效。分享给大家供我们参谋,具体如下:

<html>
<title>下拉框选择要显示的图片</title>
<body>
<img width=320 height=240 src="images/m01.jpg" name="x1"> 
<SELECT onChange="document.x1.src=options[selectedIndex].value"> 
<option value="images/m04.jpg">油菜花开</option> 
<option value="images/m03.jpg">往事如茶</option> 
<option value="images/m02.jpg">野花绽放</option> 
<option value="images/m01.jpg">红叶传情</option> 
</SELECT> 
</body>
</html>
<!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>

期望本文所述对咱们的javascript程序设计有所辅助。

使用在线HTML/JS/css运转为工人身份具,轻巧意义图如下:

您可能感兴趣的稿子:

  • javascript完成省市区三级联合浮动下拉框菜单
  • jsp从数据库获取数据填充下拉框落成二级联合浮动菜单的艺术
  • JavaScript兑现将数组数据拉长到Select下拉框的方法
  • 省市区三级联合浮动下拉框菜单javascript版
  • JavaScript贯彻的图像模糊算法代码分享
  • JS仿百度机动下拉框模糊匹配提醒

图片 1

选拔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程序设计拥有支持。

您或者感兴趣的小说:

  • javascript贯彻省市区三级联合浮动下拉框菜单
  • 省市区三级联合浮动下拉框菜单javascript版
  • js 自定义的联合浮动下拉框
  • js完毕的下拉框二级联合浮动功效
  • JavaScript Ajax Json完结上下级下拉框联合浮动作用实例代码
  • jQuery+jsp下拉框联合浮动获取本地数据的措施(附源码)
  • javascript省市区三级联合浮动下拉框菜单实例演示
  • Angularjs达成下拉框联合浮动的身体力行代码
  • javascript完成日期三级联合浮动下拉框选取菜单

本文由今晚买四不像发布于计算机网络技术,转载请注明出处:JS实现的简单下拉框联动功能示例,js实现下拉框

关键词: