输出框弹出级联选择框方法应用

1 页面上加一个div，用于放级联选择框

<div id="selectDiv" 

style="display:none;position:absolute;background-color:#BFEBEE;border:1px ;padding:1px;font-size:1px" ></div>

2 隐藏域用于回写值

<input type="text" title="${param['regionInput']}" id="regionInput" name="regionInput" size="10" value="${param['regionInput']}"  readonly="readonly" />
<input type="hidden" id="regionid" name="filter_EQS_regionid" value="${param['filter_LIKES_regionid']}" />

3 脚本事件

   $(document).ready(function() {


//  ajax 取数据构建多级选择框
$("#regionInput").click(function(){
var selectType = $("<select>");
selectType.attr("id","selectTypeId");
var optionStr = '<option value="0">--类型---</option><option value="004">004</option><option value="003">003</option><option value="002">002</option>';
selectType.append(optionStr);
// second select
var selectRegion = $('<select id="selectId" name="selectId"><option value="">--未选择--</option></select>');


$("#selectDiv").html("");//原内容清空
$("#selectDiv").append(selectType);
$("#selectDiv").append(selectRegion);

$("#selectDiv").css("left",$(this).offset().left);
$("#selectDiv").css("top",$(this).offset().top+20);
$("#selectDiv").show();

$("#selectTypeId").bind("change",function(){

var typeid = $(this).val();
//alert(typeid!=0);
if(typeid!='0'){
var url = "getJsonSelect2.action?regionTypeId="+typeid;
$("#selectId").empty();
var isExistOption = false;
$.getJSON(url,function(result){
$.each(result,function(i,field){
if(isExistOption==false){
isExistOption=true;
$("#selectId").append("<option value='' >--未选择--</option>");
}
$("#selectId").append("<option value='"+field.id+"'>"+field.mc+"</option>");
});
if(isExistOption==false){
$("#selectId").append("<option value=''>--无选项--</option>");
}
});
}
else{
$("#selectId").empty();
$("#selectId").append("<option value=''>--未选择--</option>");
$("#regionInput").val("");
$("#regionid").val("");
}

// second select even
$("#selectId").bind("change",function(){
var regionid = $(this).val();
var regiontext = $(this).find("option:selected").text();//or $("#selectId option:selected").text();
if(regionid!=''){
$("#regionInput").val(regiontext);
$("#regionid").val(regionid);

$("#selectDiv").css("display","none");//close div
$("#selectDiv").html("");//内容清空

}
});



});
});

                //   很重要,用于点击非选择框和非相应输入框时,div做隐藏处理
$(document).click(function(e){
var clickid = e.srcElement.id;
if(clickid!='selectDiv' && clickid!='regionInput'&& clickid!='selectTypeId'&& clickid!='selectId'){
$("#selectDiv").css("display","none");//close div
$("#selectDiv").html("");//内容清空
}
});

});//end ready