三级级联

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