使用JavaScript写一个三级下拉框联动

使用JavaScript写一个三级下拉框联动
首先我们需要确定思路，定义三个下拉框：

             1.从后台获取包含的数组1.1定义数组2.将数组中的信息添加到下拉框中2.1遍历数组，将数组信息添加下拉框2.2每添加一个信息，创建一个option标签，进行赋值

给第一个下拉框定义一个onchange的方法，根据对应的下标给下一级下拉框赋值对应的数组，第二级和第三极同理。注意在改动上一级下拉框的同时将下一级下拉框内容清空。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 页面三个下拉框，国土，城邦/势力，英雄，对应的下拉框出现所有的所拥有的下一级 --><select onchange="getIndex(this)" ><option>--请选择国土--</option></select><select onchange="getIndexx(this)"><option>--请选择城邦/势力--</option></select><select ><option>--请选择英雄--</option></select><script type="text/javascript">/*显示所有国土1.从后台获取包含的数组1.1定义数组2.将数组中的信息添加到下拉框中2.1遍历数组，将数组信息添加下拉框2.2每添加一个信息，创建一个option标签，进行赋值*///获取下拉框let selNode = document.getElementsByTagName("select");let country = ["德玛西亚","诺克萨斯","艾欧尼亚","比尔吉沃特"];createMethod(country,0);//第二级下拉框let city = [["--请选择城邦/势力--"],["--请选择城邦/势力--","光盾.冕卫","无畏先锋"],["--请选择城邦/势力--","黑色玫瑰","猩红结社"],["--请选择城邦/势力--","崖谷修道院","影流"],["--请选择城邦/势力--","屠夫码头","地下海道"],];function getIndex(obj){//先清空之前的数据selNode[1].length = 0;//先获取到用户选择的国土--通过下标来获取let proIndex = obj.selectedIndex;console.log(proIndex);//对应的具体城市数组let citys = city[proIndex];createMethod(citys,1);}//第三级下拉框let hero = [["--请选择英雄--"],[ ["--请选择英雄--","盖伦","拉克丝"],["--请选择英雄--","赵信","西丝丽雅"],],[ ["--请选择英雄--","乐芙兰","芮尔"],["--请选择英雄--","吸血鬼","斯维因"],],[ ["--请选择英雄--","卡尔玛","盲僧"],["--请选择英雄--","劫","凯隐"],],[ ["--请选择英雄--","船长","男枪"],["--请选择英雄--","派克","小鱼人"],],];function getIndexx(objx){//先清空之前的数据selNode[2].length = 0;let proIndex = document.getElementsByTagName("select")[0].selectedIndex;let proIndexx = objx.selectedIndex;let heros = hero[proIndex][proIndexx-1];createMethod(heros,2);               }//封装方法function createMethod(arr,index){for(let x=0;x<arr.length;x++){//创建option标签let optNode = document.createElement("option");//给option标签赋值optNode.innerHTML = arr[x];//将创建好的option标签添加到省份的下拉框selNode[index].appendChild(optNode);}}</script></body>
</html>

使用JavaScript写一个三级下拉框联动相关推荐

jQuey/js 省市县三级下拉框联动的回显（简单易懂）
JSP 代码 <tr><td>地址:</td><td><select id="province&q ...
js获得html下拉框的值,JavaScript如何获取select下拉框中第一个值
本文主要和大家介绍JavaScript实现获取select下拉框中第一个值的方法,涉及javascript针对页面元素属性的相关获取操作技巧,需要的朋友可以参考下,希望能帮助到大家. 1.说明获取s ...
php jq ajax 4个下拉框联动案列,AJAX_AJAX实现下拉框联动，想当年，为了实现三级联动， - phpStudy...
AJAX实现下拉框联动想当年,为了实现三级联动,找个js高手些了N多代码才搞定,但是很慢,因为一次要将所有的选项取来,然后排序,查找动态显示. 现在使用AJAX真是太方便了,下面做了个简单例子,实现 ...
javascript实现下拉条联动_js实现下拉框联动
今天学习了如何用js实现下拉框的联动,下拉框联动主要指的是当一个下拉框的内容改变时另一个下拉框的内容也会相应的发生改变.比如,我么有时在注册时会需要添加籍贯,当我们选择相应的省份之后,后面的市区也会相 ...
【基于vue写的select下拉框】
一个基于vue写的select下拉框 <template><div class="selectCompents"><div class="s ...
html年月日下拉联动菜单年月日三下拉框联动
<html> <head> <title>年月日三下拉框联动</title> <meta http-equiv='Content-Type' co ...
jquery ajax下拉联动,jQuery Ajax MVC 下拉框联动
无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List TeamLeaderList = FinanceD ...
antd 下拉框怎么联动_antd下拉框联动使用步骤详解
这次给大家带来antd下拉框联动使用步骤详解,antd下拉框联动使用的注意事项有哪些,下面就是实战案例,一起来看一下. 先说一下效果要求,上面一个下拉框,下面一个,要求上面选中的时候,下面的内容要跟着 ...
jsp下拉框传到html下拉框,在一个jsp页面实现二级下拉框联动
在一个jsp页面实现二级下拉框联动,实时读取数据库数据. 在一个jsp页面实现二级下拉框联动,实时读取数据库数据,这个方法非常使用,只需要修改很小的地方就可以使用.设计的文件,serch.jsp,ma ...

使用JavaScript写一个三级下拉框联动

使用JavaScript写一个三级下拉框联动相关推荐

最新文章

热门文章