需求描述：
1.可以动态添加多个下拉框,可减少下拉框
2.选中第一个下拉框的任意一个值，同时第三个下拉框的值跟着改变，显示对应的数据。
ps:what?光动态添加就足以。。。。赋值还不能直接赋，而是添加下拉时就赋值。。。。。经过百般折磨，头发掉了n根，最终通过巧妙的思路解决了，在此记录下。若对你有所帮助，点赞加关注吧！后续及时更新。
效果显示：
第一个下拉选项显示
效果显示1
选择下拉项，同时加载数据到第三个下拉框
效果显示2
选择不同的下拉项，第三个下拉框中显示不同的数据
效果显示3
HTML标签：
注：在这里直接去掉了第二行的标签
<div class="name reviewLevel" style="margin-top: 5px;margin-bottom: 5px">
<span id="checkLevel">
<label style="font-size: 15px;" class="lab">审核层级:</label>
<select name="reviewLevel" class="reviewLevelAdd" id="reviewLevelAdd0" onchange="changeReviewLevel(this.id)" style="width: 80px;height: 28px">
<option value=""></option>
<option value="集团">集团</option>
<option value="群">群</option>
<option value="处">处</option>
<option value="部">部</option>
<option value="课">课</option>
<option value="组">组</option>
</select>
</span>
<a href="javascript:void(0)" class="easyui-linkbutton c6" onclick="addCheckLine(1)" id="addLine"
style="width:28px">+</a>
<a href="javascript:void(0)" class="easyui-linkbutton c6" onclick="addCheckLine(2)" id="reduceLine"
style="width:28px">-</a>
</div>
<div class="name" style="margin-top: 5px;margin-bottom: 5px">
<span id="checkDept">
<label style="font-size: 15px;" class="lab">审核单位:</label>
<select name="reviewDept" class="reviewDeptAdd" style="width: 80px;height: 28px"></select>
</span>
</div>
添加行删除行
function addCheckLine(num) {
//添加行
if (num === 1) {
count++;
var ids="reviewLevelAdd"+count;
var idsType="reviewTypeAdd"+count;
var idsDept="reviewDeptAdd"+count;
console.log("ids:"+ids);
var reviewLevel = " <select name=\"reviewLevel\" class=\"reviewLevelAdd\" id="+ids+" onChange=\"changeReviewLevel(this.id)\" style=\"width: 80px;height: 28px\">\n" +
" <option value=\"\"></option>\n" +
" <option value=\"集团\">集团</option>\n" +
" <option value=\"群\">群</option>\n" +
" <option value=\"处\">处</option>\n" +
" <option value=\"部\">部</option>\n" +
" <option value=\"课\">课</option>\n" +
" <option value=\"组\">组</option>\n" +
" </select>";
$('#checkLevel').append(reviewLevel);
var reviewDept1=" <select name=\"reviewDept\" class=\"reviewDeptAdd\" id="+idsDept+" style=\"width: 80px;height: 28px\">\n" +
" </select>";
$('#checkDept').append(reviewDept1);
} else if (num === 2) {
//删除行,保留一个下拉框
if (count >0) {
$('#checkLevel select:last,#checkType select:last,#checkDept select:last').remove();
count--;
} else {
count = 0;
}
}
}
请求数据
为了获取改变数据的行，试了很久，动态生成的下拉框无法获取到索引，所以才想到了使用id，并且给id后加一个数字
function changeReviewLevel(id){
var reviewDept;
var checkDept;
var objIndex=id.charAt(id.length-1); //截取最后一位获得索引，如id=reviewLevelAdd1
$.ajax({
url: "queryData.do",
type: "post",
data: {},
dataType: "json",
success: function (data) {
getData(id,reviewDept,checkDept,objIndex,data);
}
});
}
给下拉框赋值
function getData(id,reviewDept,checkDept,objIndex,data){
//获取checkDept 中的文本，判断是否有值，如有清空数据
var text=$("#checkDept select").find("option:selected").text();
if (text!==null&&text!==''){
$('#checkDept select').eq(objIndex).find("option").remove();
}
if ($("#"+id).val() === "集团") {
for (var j = 0; j <data.groupNameList.length; j++) {
checkDept = data.groupNameList[j].groupName;
reviewDept = "<option value='" + checkDept + "'>" + checkDept + "</option>";
$(reviewDept).appendTo($('#checkDept select').eq(objIndex));
}
}else if ($("#"+id).val() == "群"){
for (var j = 0; j <data.bgList.length; j++) {
checkDept = data.bgList[j].bg;
reviewDept = "<option value='" + checkDept + "'>" + checkDept + "</option>";
$(reviewDept).appendTo($('#checkDept select').eq(objIndex));
}
}
}
