Question

jsp里的动态加载select

Answer 1

动态加载
一：body里面代码
<th>产品线</th>
<td style="padding-left: 10px;">
<html:select property="productLineCode" onchange="getchannelCodeRealtion(this.value)" name="ForecastForProduceForm" styleId="productLineCodeS">
<html:option value="">--请选择--</html:option>
</html:select>

二：js里面代码
// JQuery
// 页面加载时执行函数
$(document).ready(----------------------$(document).ready(）；
// 内部函数 查询产品线
function(){ ----------------------------------function(){}
var url = "${pageContext.request.contextPath}/ForecastForProduceAction.do";-------通用取到根目录方法
var params = "action=SearchProductLineInfo";

$.ajax({-----------------------------------$.ajax({，，，，}）；
async: true,
cache: false,
type: "post", ----------------------------------双引号
url: url,
data: params,
error: showError,
success: getProductLineInfo
});

});

// 此函数在请求时遇到错误时调用
function showError(XMLHttpRequest, textStatus, errorThrown) {
// 不做任何操作
if(testStatus == "parsererror"){
return;
}
}

// 回调函数 给下拉列表框填充值
function getProductLineInfo(data){ -------------actin里request。Setatribut的data
// 转换成对象
var json = eval("(" + data + ")");-------若是getJson就不用eval(data)都可以，若是$.ajax就要,eval(data)只是把字符串转换为对象，ajax可以指定返回值，就是type
--------
// 从Josn里取出对象
var ProductLineV = json.ProductLineV;
var len = ProductLineV.length;

// 得到控件名称
var productLine = $("select[name='productLineCode']");
// 表单产品线编码 <用于判断选中下拉列表框>
var code = '${ForecastForProduceForm.productLineCode}';
// 清空控件
productLine.empty();
// 依次创建下拉列表的中内容
for(var i = 0; i < len; i++){
if(code == ProductLineV[i].productLineCode){
productLine.append("<option value='"+ProductLineV[i].productLineCode+"'selected='selected'>"+ProductLineV[i].productLineName+"</option>" );
}else{
productLine.append("<option value='"+ProductLineV[i].productLineCode+"'>"+ProductLineV[i].productLineName+"</option>" );
}

}
var plcode = $("select[name='productLineCode']").val();
// 判断是否为空
if(plcode == ""){
alert("请选择产品线");
return;
}else{
getchannelCodeRealtion(plcode);
}
}
//通过产品线级联渠道
function getchannelCodeRealtion(plcode){
var url1 = "${pageContext.request.contextPath}/ForecastForProduceAction.do";
var params1 = "action=SearchChanCodeInfo&productLineCode="+plcode;
$.ajax({
async: true,
cache: false,
type: "post",
url: url1,
data: params1,
error: showError,
success: getChanCodeInfo
});
}
// 回调函数 chan_code给下拉列表框填充值
function getChanCodeInfo(data){
if(data=='{\'ProductChanV\': ]}'){
alert("产品线与渠道不对应，请联系管理员!");
// 得到控件名称
var productLine = $("select[name='salesChanCode']");
// 清空控件
productLine.empty();
// 依次创建下拉列表的中内容
productLine.append("<option value=''>无渠道</option>" );
return null;
}
// 转换成对象
var jsona = eval("(" + data + ")");

// 从Josn里取出对象
var ProductChanV = jsona.ProductChanV;
var len = ProductChanV.length;

// 得到控件名称
var productLine = $("select[name='salesChanCode']");
// 表单产品线编码 <用于判断选中下拉列表框>
var code = '${ForecastForProduceForm.salesChanCode}';
// 清空控件
productLine.empty();
// 依次创建下拉列表的中内容
for(var i = 0; i < len; i++){
if(code == ProductChanV[i].salesChanCode){
productLine.append("<option value='"+ProductChanV[i].salesChanCode+"'selected='selected'>"+ProductChanV[i].salesChanName+"</option>" );
}else{
productLine.append("<option value='"+ProductChanV[i].salesChanCode+"'>"+ProductChanV[i].salesChanName+"</option>" );
}

}
}

后台ForecastForProduceAction里的SearchProductLineInfo方法
// 通过 Json 动态构建一个对象 ProductLineV为对象名 属性为 productLineCode、productLineName
StringBuffer json = new StringBuffer();
json.append("{'ProductLineV': [");
for(Object obj : olist){
Object[] productLine = (Object[])obj;
json.append("{'productLineCode':'").append(productLine[0]).append("'");
json.append(",'productLineName':'").append(productLine[1]).append("'");
json.append(",'productLineId':'").append(productLine[2]).append("'},");
}
// 去掉最后一个"，"
json.delete(json.length()-1, json.length());
json.append("]}");
response.setCharacterEncoding("GBK");
response.setContentType("text/html");
response.getWriter().write(json.toString());
把这个json送到了上面的页面 并用// 转换成对象
var json = eval("(" + data + ")"); 接取