3级级联

jsp
productLine:<html:select property="productLine" styleClass="productNode" styleId="productLine">
<html:option value=""></html:option>
<html:options collection="class3List" property="item_id" labelProperty="item_name" />
</html:select>
productFamily:
product:
<html:select property="productFamily" styleClass="productNode" styleId="productFamily">
<html:option value=""></html:option>
<html:options collection="class1List" property="item_id" labelProperty="item_name" />
</html:select>
product:<html:select property="product" styleClass="productNode" styleId="product">
<html:option value=""></html:option>
<html:options collection="class2List" property="item_id" labelProperty="item_name" />
</html:select>

JS
/**
* 初始化绑定事件
*/
$(document).ready(function(){
$('.productNode').each(function(){
var $this = $(this);
$this.change(function(){
//产品线select onchange
if ($this.attr('id') == "productLine")
{
var $proFamilyEL = $('#productFamily');
var $proEL = $('#product');
//如果是请选择，产品族，客户产品清空，否则Ajax请求
clearOptions($proEL);
clearOptions($proFamilyEL);

//如果是请选择，不请求
var productLine = $.trim($this.val());
if (productLine != "")
{
ajaxSearchChildNode($proFamilyEL, productLine, "");
}
}
//产品族select onchange
if ($this.attr('id') == "productFamily")
{
var $proEL = $('#product');
//如果是请选择，客户产品清空，否则Ajax请求
clearOptions($proEL);

//如果是请选择，不请求
var productFamily = $.trim($this.val());
if (productFamily != "")
{
ajaxSearchChildNode($proEL, $.trim($('#productLine').val()), productFamily);
}
}
});
});
});

function ajaxSearchChildNode($element, productLine, productFamily) {
$.ajax({
url : '/supportmng/pages/usermanage/user/listUserInfo.do?actionFlag=getProductNodeByAjax',
data : {
'productLine' : productLine,
'productFamily' : productFamily
},
type : 'get',
dataType : 'json',
async : false,
success : function(json){
clearOptions($element);
$.each(json,function(i){
var optionVal = json[i].item_id;
var optionTxt = json[i].item_name;
if (optionVal != "" && optionVal != "undefined")
{
if (i == 0)
{
$element.append('<option value=""></option>');
}
$element.append('<option value="' + optionVal + '">' + optionTxt + '</option>');
}
});
}
});
}

//清空下拉列表的内容
function clearOptions($element) {
$element.empty();
}