运用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();
		}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!