php下拉框多级联动,js实现多级联动下拉框

最新推荐文章于 2021-03-29 05:25:15 发布
转载 最新推荐文章于 2021-03-29 05:25:15 发布 · 490 阅读 · 0
文章标签：

#php下拉框多级联动

这段代码实现了一个基于XML数据的下拉框联动功能，主要用于生物分类的选取，包括门、纲、目、科、属。当用户在某个下拉框选择一个选项时，会根据所选内容更新下一级别的下拉框选项，同时禁用已选择的下拉框及其后续级别，确保数据的层级关系正确展示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

大概的思路：

1、读取xml文件

2、当一个下拉框选中某选项时，根据该选项，当前节点指向下一层，进入下一层下拉框的设置

3、取消当前下拉框的禁用，禁用下一层的下拉框

4、清空当前下拉框的选项

5、根据当前节点读取xml的数据，设置下拉框选项

6、返回步骤2

JS代码：

var xmlDoc;

var browserType;

var currentNode;//当前所在节点

setBrowserType();

loadXml("classify.xml");

//读取xml文件数据并设置门、纲、目、科、属的下拉框

//设置“门”的下拉框

function setPhylum(){

currentNode=xmlDoc.documentElement;

var phylums=xmlDoc.documentElement.childNodes;

var phylumName;

if(browserType=="IE"){

for(var i=0;i

//从门到属，都有name属性标签，并且所有下拉框选项索引都是从1开始

phylumName=phylums[i].selectNodes("name")[0].text;

document.forms[0].phylum.options[i+1]=new Option(phylumName,phylumName);

}

}

else{//FF

//FireFox没有selectNodes()方法，且其childNodes的对应索引是1,3,5,7...

for(var i=1;i

phylumName=phylums[i].childNodes[1].textContent;

document.forms[0].phylum.options[(i+1)/2]=new Option(phylumName,phylumName);

}

document.forms[0].clazz.disabled="disabled";

document.forms[0].order.disabled="disabled";

document.forms[0].family.disabled="disabled";

document.forms[0].genus.disabled="disabled";

}

}

//设置“纲”的下拉框

function setClazz(selectedIndex){

//取消下拉框的禁用

//后面的下拉框禁用，这是因应各下拉框的无序选择可能产生的错误

//比如选了“科”又回头重新选“目”，或更改同一个下拉框选项)

document.forms[0].clazz.disabled=null;

document.forms[0].order.disabled="disabled";

document.forms[0].family.disabled="disabled";

document.forms[0].genus.disabled="disabled";

clearOption(document.forms[0].clazz);

var clazzes;

var clazzName;

//将选中的门节点作为当前节点，注意这里需要将索引回减1

//因为门的父节点没有name属性标签，而下拉框的索引又是从1开始

//currentNode的赋值应使用绝对定位，也是因应各下拉框的无序选择

//currentNode=currentNode.childNodes(selectedIndex-1);

if(browserType=="IE"){

currentNode=xmlDoc.documentElement.childNodes(selectedIndex-1);

clazzes=currentNode.childNodes;

//因为门节点的第一个子节点为name属性标签，故循环时索引从1开始

//相应的下拉框的索引就与纲节点的索引同步(不需要options[i+1])，目、科、属也是一样

for(var i=1;i

clazzName=clazzes[i].selectNodes("name")[0].text;

document.forms[0].clazz.options[i]=new Option(clazzName,clazzName);

}

}

else{//FF

currentNode=xmlDoc.documentElement.childNodes[selectedIndex*2-1];

clazzes=currentNode.childNodes;

for(var i=1;i

clazzName=clazzes[i+2].childNodes[1].textContent;

document.forms[0].clazz.options[(i+1)/2]=new Option(clazzName,clazzName);

}

}

}

//设置“目”的下拉框

function setOrder(selectedIndex){

//取消下拉框的禁用

//后面的下拉框禁用，这是因应各下拉框的无序选择可能产生的错误(比如选了“科”又回头重新选“目”)

document.forms[0].order.disabled=null;

document.forms[0].family.disabled="disabled";

document.forms[0].genus.disabled="disabled";

clearOption(document.forms[0].order);

var orderName;

//currentNode的赋值应使用绝对定位

var phylumSI=document.forms[0].phylum.selectedIndex;    //phylum selected index

if(browserType=="IE"){

currentNode=xmlDoc.documentElement

.childNodes[phylumSI-1]

.childNodes[selectedIndex];

var orders=currentNode.childNodes;

for(var i=1;i

orderName=orders[i].selectNodes("name")[0].text;

document.forms[0].order.options[i]=new Option(orderName,orderName);

}

}else{

currentNode=xmlDoc.documentElement

.childNodes[phylumSI*2-1]

.childNodes[selectedIndex*2+1];

var orders=currentNode.childNodes;

for(var i=1;i

orderName=orders[i+2].childNodes[1].textContent;

document.forms[0].order.options[(i+1)/2]=new Option(orderName,orderName);

}

}

}

//设置“科”的下拉框

function setFamily(selectedIndex){

document.forms[0].family.disabled=null;//取消下拉框的禁用

document.forms[0].genus.disabled="disabled";//后面的下拉框禁用

//currentNode的赋值应使用绝对定位

var phylumSI=document.forms[0].phylum.selectedIndex;//phylum selected index

var clazzSI=document.forms[0].clazz.selectedIndex;  //clazz selected index

clearOption(document.forms[0].family);

var families;

var familyName;

if(browserType=="IE"){

currentNode=xmlDoc.documentElement

.childNodes[phylumSI-1]

.childNodes[clazzSI]

.childNodes[selectedIndex];

families=currentNode.childNodes;

for(var i=1;i

familyName=families[i].selectNodes("name")[0].text;

document.forms[0].family.options[i]=new Option(familyName,familyName);

}

}

else{

currentNode=xmlDoc.documentElement

.childNodes[phylumSI*2-1]

.childNodes[clazzSI*2+1]

.childNodes[selectedIndex*2+1];

families=currentNode.childNodes;

for(var i=1;i

familyName=families[i+2].childNodes[1].textContent;

document.forms[0].family.options[(i+1)/2]=new Option(familyName,familyName);

}

}

}

//设置“属”的下拉框

function setGenus(selectedIndex){

document.forms[0].genus.disabled=null;//取消下拉框的禁用

//currentNode的赋值应使用绝对定位

var phylumSI=document.forms[0].phylum.selectedIndex;//phylum selected index

var clazzSI=document.forms[0].clazz.selectedIndex;  //clazz selected index

var orderSI=document.forms[0].order.selectedIndex;  //order selected index

clearOption(document.forms[0].genus);

var genues;

var genusName;

if(browserType=="IE"){

currentNode=xmlDoc.documentElement

.childNodes(phylumSI-1)

.childNodes(clazzSI)

.childNodes(orderSI)

.childNodes(selectedIndex);

genuses=currentNode.childNodes;

for(var i=1;i

//属为叶节点

var genusName=genuses[i].text;

document.forms[0].genus.options[i]=new Option(genusName,genusName);

}

}

else{

currentNode=xmlDoc.documentElement

.childNodes[phylumSI*2-1]

.childNodes[clazzSI*2+1]

.childNodes[orderSI*2+1]

.childNodes[selectedIndex*2+1];

genuses=currentNode.childNodes;

for(var i=1;i

//属为叶节点

var genusName=genuses[i+2].textContent;

document.forms[0].genus.options[(i+1)/2]=new Option(genusName,genusName);

}

}

}

//清空下拉框选项

function clearOption(selectElement){

for(var i=1;i

selectElement.options[i]=null;

}

}

//判断浏览器类型

function setBrowserType(){

if (window.ActiveXObject){//IE

browserType="IE";

}else{

browserType="FireFox";

}

}

//载入xml

function loadXml(xmlName){

if (browserType=="IE"){//IE

xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

xmlDoc.async = false;

xmlDoc.load(xmlName);

} else{

//      xmlDoc=document.implementation.createDocument("", "", null);

//      xmlDoc.async = false;

//      xmlDoc.load("classify.xml");

browserType="FireFox";

var xmlHttp = new XMLHttpRequest();

xmlHttp.open( "GET", "classify.xml", false ) ;

xmlHttp.send(null) ;

xmlDoc=xmlHttp.responseXML;

//FireFox没有selectNodes()方法，且xml中，其childNodes的对应索引是1,3,5,7...

//      alert(xmlDoc.getElementsByTagName("phylum")[1]

//          .childNodes[3].childNodes[3].childNodes[1].textContent);

}

}

var xmlDoc;

var browserType;

var currentNode;//当前所在节点

setBrowserType();

loadXml("classify.xml");

//读取xml文件数据并设置门、纲、目、科、属的下拉框

//设置“门”的下拉框

function setPhylum(){

currentNode=xmlDoc.documentElement;

var phylums=xmlDoc.documentElement.childNodes;

var phylumName;

if(browserType=="IE"){

for(var i=0;i

//从门到属，都有name属性标签，并且所有下拉框选项索引都是从1开始

phylumName=phylums[i].selectNodes("name")[0].text;

document.forms[0].phylum.options[i+1]=new Option(phylumName,phylumName);

}

}

else{//FF

//FireFox没有selectNodes()方法，且其childNodes的对应索引是1,3,5,7...

for(var i=1;i

phylumName=phylums[i].childNodes[1].textContent;

document.forms[0].phylum.options[(i+1)/2]=new Option(phylumName,phylumName);

}

document.forms[0].clazz.disabled="disabled";

document.forms[0].order.disabled="disabled";

document.forms[0].family.disabled="disabled";

document.forms[0].genus.disabled="disabled";

}

}

//设置“纲”的下拉框

function setClazz(selectedIndex){

//取消下拉框的禁用

//后面的下拉框禁用，这是因应各下拉框的无序选择可能产生的错误

//比如选了“科”又回头重新选“目”，或更改同一个下拉框选项)

document.forms[0].clazz.disabled=null;

document.forms[0].order.disabled="disabled";

document.forms[0].family.disabled="disabled";

document.forms[0].genus.disabled="disabled";

clearOption(document.forms[0].clazz);

var clazzes;

var clazzName;

//将选中的门节点作为当前节点，注意这里需要将索引回减1

//因为门的父节点没有name属性标签，而下拉框的索引又是从1开始

//currentNode的赋值应使用绝对定位，也是因应各下拉框的无序选择

//currentNode=currentNode.childNodes(selectedIndex-1);

if(browserType=="IE"){

currentNode=xmlDoc.documentElement.childNodes(selectedIndex-1);

clazzes=currentNode.childNodes;

//因为门节点的第一个子节点为name属性标签，故循环时索引从1开始

//相应的下拉框的索引就与纲节点的索引同步(不需要options[i+1])，目、科、属也是一样

for(var i=1;i

clazzName=clazzes[i].selectNodes("name")[0].text;

document.forms[0].clazz.options[i]=new Option(clazzName,clazzName);

}

}

else{//FF

currentNode=xmlDoc.documentElement.childNodes[selectedIndex*2-1];

clazzes=currentNode.childNodes;

for(var i=1;i

clazzName=clazzes[i+2].childNodes[1].textContent;

document.forms[0].clazz.options[(i+1)/2]=new Option(clazzName,clazzName);

}

}

}

//设置“目”的下拉框

function setOrder(selectedIndex){

//取消下拉框的禁用

//后面的下拉框禁用，这是因应各下拉框的无序选择可能产生的错误(比如选了“科”又回头重新选“目”)

document.forms[0].order.disabled=null;

document.forms[0].family.disabled="disabled";

document.forms[0].genus.disabled="disabled";

clearOption(document.forms[0].order);

var orderName;

//currentNode的赋值应使用绝对定位

var phylumSI=document.forms[0].phylum.selectedIndex;//phylum selected index

if(browserType=="IE"){

currentNode=xmlDoc.documentElement

.childNodes[phylumSI-1]

.childNodes[selectedIndex];

var orders=currentNode.childNodes;

for(var i=1;i

orderName=orders[i].selectNodes("name")[0].text;

document.forms[0].order.options[i]=new Option(orderName,orderName);

}

}else{

currentNode=xmlDoc.documentElement

.childNodes[phylumSI*2-1]

.childNodes[selectedIndex*2+1];

var orders=currentNode.childNodes;

for(var i=1;i

orderName=orders[i+2].childNodes[1].textContent;

document.forms[0].order.options[(i+1)/2]=new Option(orderName,orderName);

}

}

}

//设置“科”的下拉框

function setFamily(selectedIndex){

document.forms[0].family.disabled=null;//取消下拉框的禁用

document.forms[0].genus.disabled="disabled";//后面的下拉框禁用

//currentNode的赋值应使用绝对定位

var phylumSI=document.forms[0].phylum.selectedIndex;//phylum selected index

var clazzSI=document.forms[0].clazz.selectedIndex;//clazz selected index

clearOption(document.forms[0].family);

var families;

var familyName;

if(browserType=="IE"){

currentNode=xmlDoc.documentElement

.childNodes[phylumSI-1]

.childNodes[clazzSI]

.childNodes[selectedIndex];

families=currentNode.childNodes;

for(var i=1;i

familyName=families[i].selectNodes("name")[0].text;

document.forms[0].family.options[i]=new Option(familyName,familyName);

}

}

else{

currentNode=xmlDoc.documentElement

.childNodes[phylumSI*2-1]

.childNodes[clazzSI*2+1]

.childNodes[selectedIndex*2+1];

families=currentNode.childNodes;

for(var i=1;i

familyName=families[i+2].childNodes[1].textContent;

document.forms[0].family.options[(i+1)/2]=new Option(familyName,familyName);

}

}

}

//设置“属”的下拉框

function setGenus(selectedIndex){

document.forms[0].genus.disabled=null;//取消下拉框的禁用

//currentNode的赋值应使用绝对定位

var phylumSI=document.forms[0].phylum.selectedIndex;//phylum selected index

var clazzSI=document.forms[0].clazz.selectedIndex;//clazz selected index

var orderSI=document.forms[0].order.selectedIndex;//order selected index

clearOption(document.forms[0].genus);

var genues;

var genusName;

if(browserType=="IE"){

currentNode=xmlDoc.documentElement

.childNodes(phylumSI-1)

.childNodes(clazzSI)

.childNodes(orderSI)

.childNodes(selectedIndex);

genuses=currentNode.childNodes;

for(var i=1;i

//属为叶节点

var genusName=genuses[i].text;

document.forms[0].genus.options[i]=new Option(genusName,genusName);

}

}

else{

currentNode=xmlDoc.documentElement

.childNodes[phylumSI*2-1]

.childNodes[clazzSI*2+1]

.childNodes[orderSI*2+1]

.childNodes[selectedIndex*2+1];

genuses=currentNode.childNodes;

for(var i=1;i

//属为叶节点

var genusName=genuses[i+2].textContent;

document.forms[0].genus.options[(i+1)/2]=new Option(genusName,genusName);

}

}

}

//清空下拉框选项

function clearOption(selectElement){

for(var i=1;i

selectElement.options[i]=null;

}

}

//判断浏览器类型

function setBrowserType(){

if (window.ActiveXObject){//IE

browserType="IE";

}else{

browserType="FireFox";

}

}

//载入xml

function loadXml(xmlName){

if (browserType=="IE"){//IE

xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

xmlDoc.async = false;

xmlDoc.load(xmlName);

} else{

//xmlDoc=document.implementation.createDocument("", "", null);

//xmlDoc.async = false;

//xmlDoc.load("classify.xml");

browserType="FireFox";

var xmlHttp = new XMLHttpRequest();

xmlHttp.open( "GET", "classify.xml", false ) ;

xmlHttp.send(null) ;

xmlDoc=xmlHttp.responseXML;

//FireFox没有selectNodes()方法，且xml中，其childNodes的对应索引是1,3,5,7...

// alert(xmlDoc.getElementsByTagName("phylum")[1]

// .childNodes[3].childNodes[3].childNodes[1].textContent);

}

}

XML代码：

被子植物门

双子叶植物纲

菊目

菊科

菊属

桔梗科

同钟花属

刺萼参属

胡椒目

胡椒科

胡椒属

草胡椒属

齐头绒属

蕨类植物门

石松纲

石松目

石松科

石松属

效果图：

d83db17e-e822-3b3d-ad3f-ce3ff28b085e.jpg

f48d1c11-15fc-3e08-9792-6dce1802f1dc.jpg

b1e8bb87-0eae-39cc-a871-2db883184db4.jpg

5ec979c6-513c-315e-9855-893d46deeb1b.jpg

67745ee3-7e44-3356-a387-67578c4b1391.jpg

唐刘
关注
级联下拉框实现的 PHP 技巧
YxmtAi的博客
10-06 206
城市表包含三个字段，即城市ID（id）、城市名称（name）和对应的省份ID（province_id）。另外，为了使代码能够正常运行，确保已经引入了 jQuery 库，可以通过 CDN 的方式引入，也可以将 jQuery 文件下载到本地并引入。然后，根据省份ID查询对应的城市数据，并构造城市数据的数组。级联下拉框是一种常见的交互方式，通过选择上级下拉框的选项，动态加载下级下拉框的选项。通过以上的代码，我们实现了一个简单的级联下拉框功能。当选择了省份后，城市下拉框会根据选择的省份动态加载对应的城市选项。
layui多级联动下拉框的实现_layui实现下拉框三级联动
weixin_39722759的博客
01-16 336
项目需要用layui的三级联动，自己整理了一下，做个记录1.表结构设计CREATE TABLE `dt_area` (`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '区域主键',`area_name` varchar(16) DEFAULT NULL COMMENT '区域名称',`area_code` varchar(128) DEFAULT NULL...
php 三级联页面,php实现三级级联下拉框_PHP
weixin_30713705的博客
03-10 271
这是我在网上查找到的php实现三级级联下拉框的资料，共享个大家，大家一起进步，具体内容如下index.php:Ajax联动菜单一级分类{$arr["name"]}EOD; }mysql_close($conn);?>二级分类三级分类aa.jsXMLHttpRequest对象的status属性值为200 , html文件在本地运行,则xmlHttp.status的返回值为0,故应该加上xmlH...
php中多个多级联动6,Yii实现的多级联动下拉菜单
weixin_39755625的博客
03-10 217
本文实例讲述了Yii实现的多级联动下拉菜单。分享给大家供大家参考，具体如下：1. 视图文件
php三级联动 一个下拉框 两个文本框,基于selectBox实现多级联动的模拟下拉框–SelectBoxMulti...
weixin_39659748的博客
03-23 338
之前有写过一个模拟select框的功能插件，当时也只是支持一个单独的select，但是平时，我们经常使用到的一个功能，就是需要多个select的联动效果，正好工作中也需要该功能，于是基于之前单个selectBox的方法，实现该插件，多个联动的selectBox的插件，我这里命名为SelectBoxMulti插件。概述本插件是基于selectBox插件实现的，需要的一些参数与传入的控制属性的命名等，...
php 二级下拉框+文本框联动
lovelizhiming20的专栏
04-14 2432
我的实例如下：   var  onecount;   onecount=0;   var  onecount1;   onecount1=0;   var subcat = new Array();   var array = new Array();     //查询商品填充商品各种信息文本框中 include '../conn/conn.php';
帆软FineReport实现下拉框控件多级联动查询模板 + SQL脚本
07-01
总的来说，这个资源提供了一个实用的学习平台，帮助IT从业者掌握如何在FineReport中构建下拉框多级联动查询和饼图联动的模板，这对于提升企业报表系统的效率和易用性具有重要意义。在实践中，你可以根据自己的业务...
struts实现下拉框多级联动
03-01
博文链接：https://tj007-bo.iteye.com/blog/32481
php输入框联动,实现输入框与下拉框联动效果
weixin_28802509的博客
03-17 599
这次给大家带来实现输入框与下拉框联动效果，实现输入框与下拉框联动效果的注意事项有哪些，下面就是实战案例，一起来看一下。如图：html代码奖励类型：---请选择---{foreach $reward as $value}{$value['material_name']}{/foreach}JQuery代码$('#reward').bind('input propertychange', functi...
只用php下拉框联动,YII2可有方法实现下拉框联动？
weixin_42299150的博客
03-29 196
Yii2本身没有联动效果插件，都是用其他类拼接起来的，不过你自己可以写插件。yii2的例子没有，之前写过yii1的联动效果。你不想失去本身的验证，只要input的name跟模型中的一样就行了。//view...
php框架thinkphp实现js（ajax）无限添加级联下拉框
01-09
使用thinkphp框架做出的一个简单的ajax实现的无限添加级联下拉框的例子，ajax写的还可以，比价清晰
phpmysql下拉菜单二级联动
04-22
phpmysql下拉菜单二级联动，连接数据库mysql
三级联动下拉列表框（SELECT）jquery插件（js 三级联动） php版
11-25
感谢作者”天天无用“的共享精神，连资源分也是0，受其感染，发布一个php版的
php代码实现二级联动下拉菜单效果
11-19
php代码实现二级联动下拉菜单效果 php代码实现二级联动下拉菜单效果 php代码实现二级联动下拉菜单效果 php代码实现二级联动下拉菜单效果
php+多级地址联动,利用js+php的技术，实现全国地址多级联动的功能
weixin_32511509的博客
03-11 203
项目开发已经快到收尾的阶段，但还有几个功能还没有完成，其中有一个功能，让我纠结了几天——全国省份、城市、区／县和街道／镇的显示。看到这个需求的时候，第一反应是这只不过是个简单的“多级联动”的问题，没有什么难度。无非就是将全国所有的城市资料写入到数据表就行了。但是一想到全国那么多城市，我就懵了。这个工作量不小，于是百度到这么一篇文章－《世界国家省份城市县区街道村地址邮编常用通用功》。这篇文章研究了某...
php三级联动 一个下拉框 两个文本框,php三级联动（html，php两个页面）
weixin_35924773的博客
03-23 475
无标题文档省: 请选择市: 请选择区: 请选择$(function(){//获取省的信息ajaxFun(0,"sheng");})function ajaxFun(id,type){$.ajax({url:"sjld.php",//服务器的地址data:{id:id},//发送的数据success:function(data){//执行成功的回调strToArr(data,type);//调用函数...
php2个下拉框关联,javascript实现两个下拉框的关联
weixin_42299169的博客
03-27 475
最近在开发和维护一个后台测试系统，专门针对KVM和Xen的patch进行自动化测试，基本功能已经可以正常工作了，这一个月左右的工作可以暂告一段落。Patch测试系统的前台UI是一个网页，让用户(developer)去提交KVM、Xen、Linux、QEMU的patch，然后系统会自动测试，将结果发给developer。今天在对该系统进行简单测试时，发现一个问题，就是我们定义了几个测试场景(scen...
Thinkphp5中使用PhpSpreadsheet实现excel特定下拉框联动模板的生成
morishima的博客
10-16 3025
前言： 最近有遇到过这样的项目需求，需要导出 excel 模板的时候在模板中内置好需要联动的下拉框选择功能，这样在进行excel填写的时候可以进行选择内置的内容。 这里就是进行联动选择的，省、市、区三级进行联动，根据前边选择框中选择的条件联动后续的选择框。 功能实现 具体的实现功能如下： <?php namespace app\design\controller; use PhpOffice\PhpSpreadsheet\Cell\DataValidation; use PhpOffice\PhpS
php 实现两个select下拉框的数据联动
热门推荐
村里人的IT故事
11-06 1万+
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> role perm modify  function getRole(){  document.role_perm_mod.action="";  document.role_perm_mod.submit(); }  
FineReport下拉框多级联动查询模板及SQL实现指南
资源摘要信息:"本资源是一套关于帆软FineReport软件的详细教程，包含了两个关键部分：下拉框参数多级联动查询模板和饼图联动饼图模板。这些模板专门为FineReport 10.0版本设计，可以直接下载使用并进行学习。此外，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值