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,简单效果图如下:

使用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实现日期三级联动下拉框选择菜单
(0)

相关推荐

  • javascript实现省市区三级联动下拉框菜单

    本文实例讲述了javascript实现省市区三级联动下拉框菜单代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 使用QQ的省市区数据 --> <!-- <script type="text/javascript" src="http:/

  • js实现的下拉框二级联动效果

    本文实例讲述了js实现的下拉框二级联动效果.分享给大家供大家参考,具体如下: <script language="JavaScript" type="text/javascript"> <!-- /* * 说明:将指定下拉列表的选项值清空 * 转自:Gdong Elvis ( http://www.gdcool.net ) * * @param {String || Object]} selectObj 目标下拉选框的名称或对象,必须 */ fun

  • jQuery+jsp下拉框联动获取本地数据的方法(附源码)

    本文实例讲述了jQuery+jsp下拉框联动获取本地数据的方法.分享给大家供大家参考,具体如下: JQuery下拉框联动很好的体现了Ajax的按需取数据的要求,减小数据的交互量.(点击此处下载源代码) 下面的实例使用Json将服务器端的类或者对象转换为JSON格式,主要运用了6个jar包 commons-beanutils-1.7.0.jar commons-collections-3.2.jar commons-lang-2.3.jar commons-logging-1.0.4.jar ez

  • js 自定义的联动下拉框

    觉得这个下拉框已经稍微能满足美观需求了, 这个是点出来的效果,写了键盘的方向键,回车,esc等 事件, 并且能根据页面的底部距离判断是否向上展示 今天弄了个联动的,顺便贴部分代码 效果预览: 以下代码解决了ie6的兼容问题 复制代码 代码如下: $containerDivText.mousedown(function() { setTimeout( function() { if ($newUl[0].style.display == 'block') { $newUl.hide(); posi

  • 省市区三级联动下拉框菜单javascript版

    实现省市区三级下拉列表框,并且要实现联动效果. 方法一: 1.视图代码 <select class="prov" id="prov5" name="Province" data-code="@Model.Province"> </select> <select class="city" id="city5" name="City" dat

  • javascript省市区三级联动下拉框菜单实例演示

    本文实例讲述了javascript实现省市区三级联动下拉框菜单代码,像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"

  • Angularjs实现下拉框联动的示例代码

    第一种联动方式,在网上看到的,感觉对于我的使用性不高,比较后端不会提供这种json... 实现截图 html <select ng-model="s1" ng-options="selectData.name for selectData in selectDatas"> <option value="">--产品类目--</option> </select> <select ng-model

  • javascript实现日期三级联动下拉框选择菜单

    由于工作中涉及到生日编辑资料编辑,年月日用上面网址案例:bug提示: 编辑生日栏的[年]或者[月],之前保存的具体的[日]就不显示啦,产品说不管编辑哪个数据,其他数据不变: 然后自己改了一下代码: <html> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width,initial-scale=1,minimu

  • JavaScript Ajax Json实现上下级下拉框联动效果实例代码

    最近尝试做出一个部门和人员的下拉框联动功能,部门和人员的对应关系是1:N 复制代码 代码如下: <div class="forntName">部门</div> <div class="inpBox"> <select  name="department" id="department"  onchange="change();" style="width:

  • 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

  • 基于BootStrap multiselect.js实现的下拉框联动效果

    背景:当option特别多时,一般的下拉框选择起来就有点力不从心了,所以使用multiselect是个很好的选择,可以通过输入文字来选择选项很方便,但是有一个需要下拉框联动,网上找了半天才找到解决方法,在此分享一下 1.先引入 <script src="~/Assets/js/bootstrap-multiselect.min.js"></script> <link href="~/Assets/css/bootstrap-multiselect

  • C#省份城市下拉框联动简单实现方法

    本文实例讲述了C#省份城市下拉框联动简单实现方法.分享给大家供大家参考.具体分析如下: 复制代码 代码如下: //定义字典 Dictionary<string, string> Address = new Dictionary<string, string>(); void loadData() {    //这是你要添加的数据   //也可以选择动态添加但是考虑到数据不多不影响性能就这么做了     Address.Add("绵阳", "四川&quo

  • MVC实现下拉框联动效果(单选)

    下拉框联动效果,我们以部门--职位为例,选择部门时,关联到该部门的职位.下拉框的写法就不多说了,详细请参照前文. 视图: 其中,dept是部门的属性,deptlist是部门下拉框的属性,job是职位的属性,joblist是职位下拉框的属性,下拉框绑定请参照前文 @using (Html.BeginForm("aaai003sch", "aaa", FormMethod.Post, new { @class = "form-horizontal",

  • 基于Ajax实现下拉框联动显示数据

    公司做项目的时候,需要用到下拉框联动显示数据的功能,索性利用Ajax来实现,看到时间比较充裕,就没去找demo自己去想方法写了.纯自己的想法,有些可能比较弱智,希望不要见笑. 页面中的两个下拉列表框: <tr> <td style="width: 130px"> 所在学院:</td> <td style="width: 100px"> <select id="college" style=&q

  • JS仿百度自动下拉框模糊匹配提示

    实际项目中,我们可以把数据获取改成ajax动态获取,在 getContent()中 <!DOCTYPE> <html> <head> <title>js/jQuery实现类似百度搜索功能</title> <meta name="Author" content="Michael"> <meta name="Keywords" content="js/jQuery

  • 实时监控input框,实现输入框与下拉框联动的实例

    如图: html代码 <tr> <th scope="row">奖励类型:</th> <td><input value="" type="text" name="item" id="reward" style="width: 60px;height: 20px;" placeholder="输入关键字" />

随机推荐