功能描述：
一：ajax请求数据
1 实现三级联动，ajax请求数据。
- 根据选定级别，查询该级别下的项目类别；
- 根据选择类别，查询该级别+类别下所属项目列表；
前端涉及知识点：
（1）(‘#app’).change() 下拉框选择事件；
（2）ajax() ajax发送请求；
（3）(“#app”).empty(); 清空元素内容；
（4）( “#app” ).append(); 向元素压入元素；
<tr>
<td width='16%' height=25 bgcolor='ffffff'><span style="color: red;">*</span>被认定的最高级别</td>
<td bgcolor='ffffff'>
<select name="ftitle" id="ftitle">
<option value="">选择项目最高级别</option>
<option value="0">国家级</option>
<option value="1">省级</option>
<option value="2">市级</option>
<option value="3">县级</option>
</select>
</td>
</tr>
<tr>
<td width='16%' height=25 bgcolor='ffffff'><span style="color: red;">*</span>选择类别</td>
<td bgcolor='ffffff'>
<select class="category" name="category" id="category">
<option value="">选择类别</option>
</select>
</td>
</tr>
<tr>
<td width='16%' height=25 bgcolor='ffffff'><span style="color: red;">*</span>项目</td>
<td bgcolor='ffffff'>
<select id="classalias" class="classalias">
<option value="">选择项目</option>
</select>
</td>
</tr>
<script type="text/javascript">
$('#ftitle').change(function(){
var ftitle = $('#ftitle').val();
var leibieurl = "e/Info/master.php";
$.ajax({
url: leibieurl,
data: { "ftype": ftitle,"type" :1 },
datatype: "json",
type: "post",
success: function (data) {
var datas = JSON.parse(data);
var categoryHtml = "";
$("#category").empty();
for (var i in datas) {
categoryHtml += "<option value='" + datas[i] + "'>" + datas[i] + "</option>";
}
$( "#category" ).append( categoryHtml );
}
});
});
$('#category').change(function(){
var ftitle = $('#ftitle').val();
var category = $(this).val();
var leibieurl = "e/DoInfo/master.php";
$.ajax({
url: leibieurl,
data: { "ftype": ftitle,"category" :category ,"type" :2 },
datatype: "json",
type: "post",
success: function (data) {
var datas = JSON.parse(data);
var classaliasHtml = "";
$("#classalias").empty();
for (var i in datas) {
classaliasHtml += "<option value='" + datas[i] + "'>" + datas[i] + "</option>";
}
$( "#classalias" ).append( classaliasHtml );
}
});
});
</script>
e/Info/master.php
<?php
require("../class/connect.php");
require("../class/db_sql.php");
require("../data/dbcache/class.php");
require("../member/class/user.php");
require("../class/q_functions.php");
require LoadLang("pub/fun.php");
$link=db_connect();
$empire=new mysqlquery();
//验证是否登陆
$user=islogin();
$type=(int)$_POST['type'];
$ftype=(int)$_POST['ftype'];
if ($type == 1) {
//取得模型id
$ttsql=$empire->query("select id,leibie from {$dbtbpre}ecms_master where type='$ftype'");
$lbArr = [];
while($ttr=$empire->fetch($ttsql))
{
$lbArr[] = $ttr['leibie'];
}
$lbarr = array_unique($lbArr);
} elseif ($type == 2) {
$leibie = $_POST['category'];
$sql = "select id,xiangmu from {$dbtbpre}ecms_master where type='$ftype' AND leibie = '$leibie'";
$ttsql=$empire->query("select id,xiangmu from {$dbtbpre}ecms_master where type='$ftype' AND leibie = '$leibie'");
$lbArr = [];
while($ttr=$empire->fetch($ttsql))
{
$lbArr[] = $ttr['xiangmu'];
}
$lbarr = array_unique($lbArr);
}
db_close();
$empire=null;
exit(json_encode($lbarr));
?>
2 根据选择内容，增加/删除元素。
- 选择级别，需要对应填写该级别以及该级别以下的认证信息。比如：选择省级，就需要填写省级、市级、县级的认证信息。
- 认证信息框中，级别默认，不能再下拉筛选；
前端涉及知识点：
（1）find() 查询元素；
（2）使用for循环，从后往前remove删除元素；
（3）(“select[name=‘declaration_1[]’]”).each() 查询元素集，并遍历元素；
<script>
function domvadd_declaration() {
var i;
var str = '';
var oldi = 0;
var j = 0;
var addnum = 0;
addnum = parseInt( document.add.mvaddnum_declaration.value );
oldi = parseInt( document.add.mveditnum_declaration.value );
j = parseInt( addnum + oldi );
str = str + '<tr><td style="font-weight: 700;">认定情况' + j + '</td></tr><tr><td width="16%" ><span style="color: red;">*</span>级别</td><td align="center"><select name="declaration_1[]" id="declaration_1_' + j + '"><option value="">选择级别信息</option><option value="国家级">国家级</option><option value="省级">省级</option><option value="市级">市级</option><option value="县级">县级</option><option value="其他">其他</option></select></td><td></td></tr><tr><td width="16%">编号</td><td align="center"><input type="text" name="declaration_2[]" id="declaration_2_' + j + '" value=""></td></tr><tr><td width="16%">类别</td><td align="center" width="60%"><input type="text" name="declaration_3[]" id="declaration_3_' + j + '" value=""></td><td></td></tr><tr><td width="16%" ><span style="color: red;">*</span>列入时间</td><td align="center"><input type="text" name="declaration_4[]" id="declaration_4_' + j + '" value="" readonly="readonly"></td></tr><tr><td width="16%">批次</td><td align="center"><input type="text" name="declaration_5[]" id="declaration_5_' + j + '" value=""></td></tr><tr><td width="16%"><span style="color: red;">*</span>项目名称</td><td align="center"><input type="text" name="declaration_6[]" id="declaration_6_' + j + '" value=""></td></tr><tr><td width="16%">申请地区和单位</td><td align="center"><input type="text" name="declaration_7[]" id="declaration_7_' + j + '" value=""></td></tr><tr><td width="16%">认证单位</td><td align="center"><input type="text" name="declaration_8[]" id="declaration_8_' + j + '" value=""></td></tr>';
$( "#mvadd_declaration" ).append( str );
var str2 = '<s' + 'cript type="text/javascript">$("#declaration_4_' + j + '").dateSelect();</s' + 'cript>';
$( "#mvadd_declaration" ).append( str2 );
$( "#mveditnum_declaration" ).val( j );
}
</script>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="mvadd_declaration">
<?php
$editnum = 1;
for ( $i = 1; $i <= $editnum; $i++ ) {
?>
<tr>
<td style="font-weight: 700;">认定情况1</td>
</tr>
<tr>
<td width="16%"><span style="color: red;">*</span>级别</td>
<td align="center">
<select name="declaration_1[]" id="declaration_1_1">
<option value="">选择级别信息</option>
<option value="国家级">国家级</option>
<option value="省级">省级</option>
<option value="市级">市级</option>
<option value="县级">县级</option>
<option value="其他">其他</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td width="16%">编号</td>
<td align="center" width="60%"><input type="text" name="declaration_2[]" id="declaration_2_1" value="">
</td>
</tr>
<tr>
<td width="16%">类别</td>
<td align="center"><input type="text" name="declaration_3[]" id="declaration_3_1" value="">
</td>
</tr>
<tr>
<td width="16%"><span style="color: red;">*</span>列入时间</td>
<td align="center"><input type="text" name="declaration_4[]" id="declaration_4_1" value="" readonly="readonly">
</td>
</tr>
<tr>
<td width="16%">批次</td>
<td align="center"><input type="text" name="declaration_5[]" id="declaration_5_1" value="">
</td>
</tr>
<tr>
<td width="16%"><span style="color: red;">*</span>项目名称</td>
<td align="center"><input type="text" name="declaration_6[]" id="declaration_6_1" value="">
</td>
</tr>
<tr>
<td width="16%">申请地区和单位</td>
<td align="center"><input type="text" name="declaration_7[]" id="declaration_7_1" value="">
</td>
</tr>
<tr>
<td width="16%">认证单位</td>
<td align="center"><input type="text" name="declaration_8[]" id="declaration_8_1" value="">
</td>
</tr>
<?php
}
?>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<script type="text/javascript">
$( "#declaration_4_1" ).dateSelect();
</script>
<td height="25"> <input name="mveditnum_declaration" type="hidden" id="mveditnum_declaration" value="<?=$editnum?>">
<input name="mvnum_declaration" type="hidden" id="mvnum_declaration" value="8">
<input name="mvmust_declaration" type="hidden" id="mvmust_declaration" value="1">
<input name="mvaddnum_declaration" type="text" id="mvaddnum_declaration" value="1" size="6" style="display: none;"> <input type="button" name="Submit5" value="添加另一个认证" onclick="javascript:domvadd_declaration();">
</td>
</tr>
</table>
二 已整理好数据联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三级联动</title>
</head>
<style>
.option:after{
content: "";
width: 1px;
height: 25px;
background-color: #ccc;
/*通过定位将图标放在合适的位置*/
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
/*给自定义的图标实现点击下来功能*/
pointer-events: none;
}
.option{
width: 180px;
height: 30px;
border: 1px solid #cccccc;
position: relative;
}
.option select{
/*清除select的边框样式*/
border: none;
/*清除select聚焦时候的边框颜色*/
outline: none;
/*将select的宽高等于div的宽高*/
width: 100%;
height: 30px;
line-height: 30px;
padding-left: 20px;
padding-right:20px ;
}
.flex{
display: flex;
justify-content: start;
align-items: center;
}
.margin-left{
margin-left: 10px;
}
</style>
<body>
<form action="" name="add">
<div class="flex">
<div class="option margin-left">
<select name="ftitle" onchange="getCategory()" >
<option value="">请选择所在的省份</option>
<option value="国家级">国家级</option>
<option value="省级">省级</option>
<option value="市级">市级</option>
<option value="县级">县级</option>
</select>
</div>
<div class="option margin-left">
<select id="category" name="category" onchange="getClassalias()">
<option value="">请选择项目类别</option>
</select>
</div>
<div class="option margin-left">
<select name="classalias" id="classalias">
<option value="">请选择项目</option>
</select>
</div>
</div>
</form>
<script>
// 定义项目类别
var categorySelect = [
['民间文学','传统音乐','民俗'],
['曲艺','传统美术'],
['戏曲','传统工艺','传统技艺'],
['手工技艺','民间习俗']
];
// 定义项目
var classSelect = [
[['梁祝传说','木兰传说'],['唢呐艺术','信仰民歌'],['重阳节','打铁花','庙会']],
[['大调曲子','三弦书（南阳三弦书）'],['糖画']],
[['豫剧','宛梆'],['道口烧鸡制作技艺'],['开封马豫兴桶子鸡','开封第一楼小笼灌汤包子','开封又一新糖醋软熘鲤鱼焙面']],
[['商丘方言土语'],['柳圈火神庙会']]
];
// 获取元素
var getFtitle = document.forms['add'].ftitle;
var Category = document.forms['add'].category;
var Classalias = document.forms['add'].classalias;
// 根据级别获取类别
function getCategory()
{
// 初始化
Category.length = 1;
Classalias.length = 1;
var getSelectIndex = getFtitle.selectedIndex;
// 匹配到下面的项目类别
var fCategory = categorySelect[getSelectIndex-1];
for (var i = 0; i < fCategory.length; i++) {
Category[i+1] = new Option(fCategory[i],fCategory[i]);
}
}
// 根据类别获取项目
function getClassalias()
{
var getSelectIndex = getFtitle.selectedIndex;
var getCategorySIndex = Category.selectedIndex;
var cClassalias = classSelect[getSelectIndex - 1][getCategorySIndex - 1];
for (var i = 0; i < cClassalias.length; i++) {
Classalias[i+1] = new Option(cClassalias[i],cClassalias[i]);
}
}
</script>
总结
又是不想写总结的一天，没什么才艺，给大家展示个乒乓对打吧~
