javascript实现下拉条联动_js实现下拉框联动

今天学习了如何用js实现下拉框的联动，下拉框联动主要指的是当一个下拉框的内容改变时另一个下拉框的内容也会相应的发生改变。比如，我么有时在注册时会需要添加籍贯，当我们选择相应的省份之后，后面的市区也会相应的发生改变，这就是联动。下面是我实现此功能的代码，是通过视频学习之后自己做出相应改变之后写出的代码：

Insert title here

function fn(){

var select=document.getElementById("city");

var c=select.value;

var area=document.getElementById("area");

switch(c)

{

case "jx": area.innerHTML="抚州市南昌市赣州市宜春市";

break;

case "gd":area.innerHTML="广州市韶关市佛山市东莞市";

break;

case "fj":area.innerHTML="泉州市厦门市福州市漳州市";

break;

case "hn":area.innerHTML="长沙市湘潭市乐昌市郴州市";

break;

default:alert("error");

}

};

江西

广东

福建

湖南

抚州市

南昌市

赣州市

宜春市

下面是实现效果截图：

运行之后第一个下拉框默认选择的是江西省，第二个下拉框默认选择的是抚州市，当点击第一个下拉框选择福建省时，第二个下拉框会自动变成福建省的市区，其次我选择泉州市。

实现过程(个人理解)：

首先在在html部分写两个下拉框，第一个代表省份，id名设置为city;第二个下拉框代表市区，id名为area。在city下拉框添加一个onchange事件,事件源是下拉框内容发生改变，响应事件是名字为fn的一个函数，该事件发生即下拉框的省份发生改变之后会触发该事件，然后跳转到fn函数，执行fn函数的内容，fn函数中，首先通过document.getElementById("city")

来获取id名为cit的对象，即第一个下拉框并将该对象重新命名为select,通过select.value来获取该下拉框内的内容，即你所选取省份的内容，比如"jx" "fj" "gd"

等等，并将该内容值赋值给c变量，通过document.getElementById("area");来获取第二个下拉框对象，并命名为area;再次是通过一个switch语句来选择第二个下拉框的内容，当获取的c的值为“jx”时，执行

case "jx": area.innerHTML="抚州市南昌市赣州市宜春市";

break;

DOM的innerHTML属性可以用来获取或设置对象的内容。

javascript实现下拉条联动_js实现下拉框联动相关推荐

使用JavaScript写一个三级下拉框联动
使用JavaScript写一个三级下拉框联动首先我们需要确定思路,定义三个下拉框: 1.从后台获取包含的数组1.1定义数组2.将数组中的信息添加到下拉框中2.1遍历数组,将数组信息添加下拉框2.2每 ...
html年月日下拉联动菜单年月日三下拉框联动
<html> <head> <title>年月日三下拉框联动</title> <meta http-equiv='Content-Type' co ...
php jq ajax 4个下拉框联动案列,AJAX_AJAX实现下拉框联动，想当年，为了实现三级联动， - phpStudy...
AJAX实现下拉框联动想当年,为了实现三级联动,找个js高手些了N多代码才搞定,但是很慢,因为一次要将所有的选项取来,然后排序,查找动态显示. 现在使用AJAX真是太方便了,下面做了个简单例子,实现 ...
jsp下拉框传到html下拉框,在一个jsp页面实现二级下拉框联动
在一个jsp页面实现二级下拉框联动,实时读取数据库数据. 在一个jsp页面实现二级下拉框联动,实时读取数据库数据,这个方法非常使用,只需要修改很小的地方就可以使用.设计的文件,serch.jsp,ma ...
java下拉框读取数据库数据_在一个jsp页面实现二级下拉框联动，实时读取数据库数据...
在一个jsp(SUN企业级应用的首选)页面实现二级下拉框联动,实时读取数据库数据,这个方法非常使用,只需要修改很小的地方就可以使用.设计的文件,serch.jsp(SUN企业级应用的首选),main. ...
jquery ajax下拉联动,jQuery Ajax MVC 下拉框联动
无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List TeamLeaderList = FinanceD ...
Ext 下拉框联动第一次显示不正常的问题
做下拉框联动,异步加载数据,第一次显示时数据不准确,不要在combo_2的下拉框直接绑定store,在combo_1的改变事件里调用下面的方法 function GetAllCustomerBrand ...
swing下拉框从mysql_Java Swing应用程序 JComboBox下拉框联动查询
在web项目中,通过下拉框.JQuery和ajax可以实现下拉框联动查询. 譬如说,当你查询某个地方时,页面上有:省份: 市区: 县乡: 街道: 查询譬如说,你选择了省:江苏省,那么在市区中只会显示 ...
高级查询组件下拉框联动（三）
实现下拉框联动例子. 1.首先在ul中定义省份和城市查询条件. <ul id="dynamicCondition" style="display:none;&quo ...

javascript实现下拉条联动_js实现下拉框联动

javascript实现下拉条联动_js实现下拉框联动相关推荐

最新文章

热门文章