連動的搜尋條

很多的時候我們在搜尋條上面會有這樣的安排

日期 文字 類別

當點選下拉的選擇後輸入框自動變成可以選擇日期的輸入框，或者是另外一個連動的下拉，或者是一般的文字輸入框！

原來是因為要簡化好幾個搜尋的Form所以才突然想到這樣的應用

 

1. 安排下拉選擇框:

    可以應用DB的檢查欄位格式的方式去知道每一個下拉值的屬性 [文字,數字,日期]或者直接指定

    <select name="selCol" id="selCol" onChange="chgsrhbox()"><option value="" selected>請選擇....</option><option value="DATE">時間</option><option value="TEXT">文字</option><option value="COMBO">下拉</option></select>

另外準備三種格式的輸入/選擇框

<textarea cols="86" rows="11" name="code" class="vb">&lt;!--一般輸入框--&gt;&lt;input type="text" name="srhbox" id="dsrhbox1" style="display:none" mce_style="display:none"&gt;&lt;!--日期輸入框--&gt;&lt;input type="text" name="srhbox" id="dsrhbox2" style="display:none" mce_style="display:none" onFocus="WdatePicker({startDate:'%yyyy%mm%dd',dateFmt:'yyyyMMdd',alwaysUseStartDate:false,skin:'ext'})"&gt;&lt;!--下拉選單--&gt;&lt;select name="srhbox" id="dsrhbox3" style="display:none" mce_style="display:none"&gt;&lt;/select&gt;</textarea>

當更換Select的選擇時驅動chgsrhbox()

<mce:script language="javascript"><!--function GenSlt(rc){ var rca = rc.split(','); var dsrhbox3 = document.getElementById('dsrhbox3'); for(var idx=0;idx<rca.length;idx++){ char = rca[idx]; val = rca[idx]; var new_option = new Option(char,val); dsrhbox3.options.add(new_option); }}function GetData(KeyData){ var sArg = ''; var sUrl = ''; var oXMLHttp=gXMLHttp(); var sUrl='GetDataSrh.asp?'; sArg=sArg + 'mlogin='+KeyData; oXMLHttp.open("POST",sUrl,true); oXMLHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); oXMLHttp.send(sArg); XMLHttp.onreadystatechange=function(){ if (XMLHttp.readyState == 4){ if (XMLHttp.status == 200){ var gText=XMLHttp.responseText gText=Trim(unescape(gText)) GenSlt(gText); }else{ alert("發生問題..系統停止處理..") return false; } } }}//移除選單選項function RmOption(){ var dsrhbox3 = document.getElementById('dsrhbox3'); for(var i =dsrhbox3.length-1;i > 0 ;i--){ dsrhbox3.options[i]=null; }}function chgsrhbox(){ col=document.getElementById('selCol'); switch(col.value){ case "DATE":showbox(2);break ; case "COMBO":RmOption();GetData('CTYPE');showbox(3);break; case "TEXT":showbox(1); default:alert('請選擇搜尋欄位！');break ; }}</mce:script>

 

當下拉表單選擇文字的時候..自動隱藏日期輸入跟類別下拉

 

當下拉表單選擇日期的時後..自動隱藏一般輸入跟類別下拉

 

當下拉表單選擇類別的時候..自動隱藏一般輸入及日期選擇

 

如此使用者就不用擔心當選擇類別的時候要輸入日期，還是要另外輸入類別名稱，還是要輸入一般的文字了

 

當然這段代碼有些檔案必須要引入

 

比如

1. HTTPRequest [當選擇類別的時候，透過AJAX去找到應該要寫入下拉元件的值]

2. 日期選擇器 [當選擇日期類別，這個可以點選輸入框的日期選擇就顯示出來]

 

 

感覺好像是作弊，不過卻也讓使用者感覺到貼心的小方法！