功能描述：
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>
总结
又是不想写总结的一天，没什么才艺，给大家展示个乒乓对打吧~
