前端之家收集整理的这篇文章主要介绍了
运用ajax写下拉框二级关联,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<strong><span style="color:#ff6666;">下拉框</span></strong>
<li>
<select class="na-input" id="sel1" name="column" style="height: 24px;" onchange="changeValue()">
<option value="0" >-------请选择-------</option>
<option value="sppz" <c:if test="${column=='sppz'}">selected="selected"</c:if> >食品品种</option>
<option value="jcxm" <c:if test="${column=='jcxm'}">selected="selected"</c:if> >检测项目</option>
</select>
</li>
<li>
<select class="na-input" id="sel2" name="value" style="height: 24px;">
</select>
</li>
<strong><span style="color:#ff6666;">function</span></strong>
function changeValue(){
var value = $('#sel1 option:selected').val();//获取第一个下拉框的值
if("sppz"==value){//做判断
$.ajax({
type:"post",dataType:"text",url:"${ctx}/sppz_getAllSppz.do",cache:false,async:false,success:function(result){
var sltsppz = document.getElementById('sel2');//获取第二个下拉框的对象
var resList = eval('('+result+')');//解析从后台传回的String类型的json数组
for(var i=0;i<resList.length;i++){//循环遍历数组
sltsppz[i] = new Option(resList[i].pzmc,resList[i].id);//将数组的值依次赋给第二个下拉框
}
}
});
}else{
$.ajax({
type:"post",url:"${ctx}/jcxm_getAllJcxm.do",success:function(result){
var sltjcxm = document.getElementById('sel2');
var resList = eval('('+result+')');
for(var i=0;i<resList.length;i++){
sltjcxm[i] = new Option(resList[i].name,resList[i].id);
}
}
});
}
}
<span style="color:#ff0000;"><strong>后台数据</strong></span>
PrintWriter out = null;
JSONArray jsonArray = JSONArray.fromObject(foodpzList);//把获得的list转换成json数组
String result = jsonArray.toString();//改成String类型
try {
out = getResponse().getWriter();
out.write(result);
out.flush();
out.close();
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}