js二级联动

<body><section>    <a>省份</a>    <select id="province">        <option value="0">--请选择--</option>        <option value="1">山东</option>   //通过不同的value来区分不同的省份        <option value="2">山西</option>    </select>    <a>城市</a>    <select id="city">       <option>--请选择--</option>    </select></section></body><script>    var arr = new Array();    arr[1] = ["莱芜","济南","东营"];    arr[2] = ["长治","太原","壶关"];        var provinceInput = document.getElementById("province");  //获取省份        var cityInput = document.getElementById("city");   //获取市        provinceInput.onchange = function () {            cityInput.options.length = 1;//当省改变的时候让市的长度为1            for(var i = 0;i < arr[provinceInput.value].length;i++) {                cityInput.add(new Option(arr[provinceInput.value][i]));  //向市里面添加对应的数组元素            }    }</script>
时间: 2024-11-04 21:59:27

js二级联动的相关文章

springboot查询数据库,js实现二级联动效果

1.数据库设计 实现oracle,mysql不同数据库链接不同的数据类型 2.在跳转到添加页面的时候,去数据库查询parent_id=0的数据,存入modelMap中带入add.html页面 @GetMapping("/add") public String add(ModelMap mmap) { //查询数据库类型,返回oracle和mysql等数据库 List<DatabaseVo> databaseVo = matedataService.selectDatabas

原生js :省市二级联动

在网上把了半天像二级联动, 多是:依赖于其他框架数据修改... 于是就有了下面自写的二级联动(原生JS,面向对象,数据可订制修改不局限于省市) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>二级联动</title> </head> <body> <

省市二级联动--使用app-jquery-cityselect.js插件

只有省市二级联动,三级联动还没处理好,会尽快完善. 嵌入id: <div class="form-group"> <label>地址</label> <p>从:</p> <div class="input-group"> <input id="areaIdFrom" name="areaIdFrom" type="hidden"

利用JS实现一个简单的二级联动菜单

前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS实现二级联动菜单</title> 6 </head> 7 <body> 8 <form name="form1"

(转)JavaScript html js 地区二级联动,省市二级联动,省市县js+xml三级联动

JavaScript html js 地区二级联动,省市二级联动,省市县js+xml三级联动 原文链接:http://heisetoufa.iteye.com/blog/353974 比较好的二级联动: 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3 <HEAD> 4 <TITLE> New Document </TITLE>

js省市二级联动菜单,IE6,FF下测试通过

<html> <head> <meta http-equiv="Content-Language" content="zh-cn" /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>二级联动js,IE6,FF下测试通过</title> <s

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="

JS实现省市二级联动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF

JS中的二级联动的注意事项

今天做了一个二级联动的下拉选择框(select)做这个二级联动的时候遇到了一个问题,就是二级菜单的内容越来越多,选择一次一级菜单就会产生一次二级菜单的内容,而且是越来越多.通过思路和代码的双重排查后发现问题出现的原因:更改一级菜单时就必须把二级菜单清空,否则也会出现我这样的问题! 特别要注意一点:转换一级选项时,要清空先前创建的二级选项,否则选项会越来越多 代码如下: <!DOCTYPE html><html lang="en"><head> <