輸出框彈出級聯選擇框方法應用

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